作者:Anthony Gore
译者:前端小智
起源:vuejsdevelopers
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq449245884/xiaozhi 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。
Vuex
是 Vue.js 生态系统中必不可少的工具。然而新接触 Vuex 的开发人员可能会被诸如“状态管理模式”这样的术语所排挤,并且对他们理论须要 Vuex 的目标感到困惑。
本文算是 Vuex 的入门,当然也会 Vuex 的高级概念,并向大家展现如何在应用程序中应用 Vuex。
Vuex 解决的问题
要了解 Vuex,首先要了解它要解决的问题。
假如咱们开发了一个多用户聊天利用。界面有用户列表、私人聊天窗口、带有聊天记录的收件箱和告诉栏,告诉用户以后未查看的其余用户的未读音讯。
数以百万计的用户每天通过咱们的利用与数以百万计的其余用户聊天。然而,有人埋怨一个宜人的问题: 告诉栏偶然会给出谬误的告诉。用户被告诉有一条新的未读音讯,但当他们查看时,它只是一条曾经被看过的音讯。
该作者所形容的是几年前 Facebook 开发人员在其聊天零碎中遇到的真实情况。解决这一问题的过程中 开发人员创立名为 “Flux”的应用程序体系结构。Flux 形成了 Vuex,Redux 和其它相似库的根底。
Flux
Facebook 开发者为“僵尸告诉”这个问题,苦苦挣扎了一段时间。他们最终意识到,它的持久性不仅仅是一个简略的缺点——它指出了应用程序架构中的一些潜在缺点。
形象中最容易了解该缺点:当应用程序中有多个共享数据的组件时,它们互连的复杂性将减少到无奈预测或了解数据状态的境地。因而,该应用程序无奈扩大或保护。
Flux
是一个模式,不是一个库。咱们不能去 Github 下载 Flux。它是一种相似 MVC 的设计模式。像 Vuex 和 Redux 这样的库实现 Flux 模式的形式与其余框架实现 MVC 模式的形式雷同。
事实上,Vuex 并没有实现 Flux 的全副,只是一个子集。不过当初不要放心这个问题,咱们关注于了解它所遵循的要害准则。
准则 1:繁多起源
组件可能具备仅须要理解的本地数据。例如,滚动条在用户列表组件中的地位可能与其余组件无关。
然而,要在组件之间共享的任何数据(即应用程序数据)都必须保留在一个独自的地位,与应用它的组件离开。
这个繁多地位称为 “store”。组件必须从该地位读取应用程序数据,并且不能保留其本人的正本以避免抵触或一致。
import {createStore} from "vuex";
// Instantiate our Vuex store
const store = createStore({
// "State" 组件的应用程序数据
state () {
return {myValue: 0};
}
});
// 组件从其计算的属性拜访 state
const MyComponent = {template: "<div>{{ myValue}}</div>",
computed: {myValue () {return store.state.myValue;}
}
};
准则 2:数据是只读的
组件能够从 store
中自在读取数据。然而不能更改 store
中的数据,至多不能间接更改。
取而代之的是,它们必须告知 store
要更改数据的用意,store
由负责通过一组定义的性能(称为mutation
)进行更改。
为什么采纳这种办法?如果咱们集中数据更改逻辑,那么在状态不统一的状况下,咱们只须要在同一中央排查就行了,不必到具体的每个文件中。咱们将某些随机组件(可能在第三方模块中)以意外形式更改数据的可能性降至最低。
const store = createStore({state() {
return {myValue: 0};
},
mutations: {increment (state, value) {state.myValue += value;}
}
});
// 须要更新值吗?// 谬误的,不要间接更改 store 值
store.myValue += 10;
// 正确的,调用正确的 mutations。store.commit('increment', 10);
准则 3:mutation 是同步的
如果应用程序在其体系结构中实现了上述两个准则,那么调试数据不统一就容易得多。能够记录提交并察看状态如何变动(在应用 Vue Devtools 时的确能够这样做)。
但如果咱们的 mutation
被异步调用,这种能力就会被减弱。咱们晓得提交的程序,但咱们不晓得组件提交它们的程序。
同步 mutation
可确保状态不取决于不可预测事件的程序和工夫。
太酷了,那么 Vuex 到底是什么?
有了所有这些背景常识,咱们终于能够解决这个问题 -Vuex 是一个库,可帮忙咱们在 Vue 应用程序中实现 Flux 架构。通过执行上述准则,即便在多个组件之间共享数据时,Vuex 仍可将咱们的应用程序数据放弃在通明且可预测的状态。
当初,咱们曾经对 Vuex 有了一个高级的理解,咱们看看如何在理论我的项目创立基于 Vuex 的应用程序。
做一个应用 Vuex to-do-list
为了演示 Vuex 的用法,咱们设置一个简略的待办应用程序。大家能够在此处拜访代码的无效示例。
示例地址:https://codesandbox.io/s/happ…
如果大家本人的电脑尝试一波,那么能够应用上面的命令:
vue create vuex-example
装置 Vuex
cd vuex-example
npm i -S vuex@4
npm run serve
创立一个 Vuex store
当初,创立 Vuex store,在我的项目中创立 src/store/index.js
:
mkdir src/store
touch src/store/index.js
关上文件并导入 createStore
办法。此办法用于定义 store
及其个性。当初,咱们导出该store
,以便在 Vue 利用中能拜访它。
// src/store/index.js
import {createStore} from "vuex";
export default createStore({});
将 store 增加到 Vue 实例
为了能够从任何组件中拜访 Vuex store,咱们须要在主文件中导入 store
模块,并将 store
作为插件装置在主 Vue 实例上
// src/main.js
import {createApp} from "vue";
import App from "@/App";
import store from "@/store";
const app = createApp(App);
app.use(store);
app.mount("#app");
创立一个简略的应用程序
如上所述,Vuex 的重点是通常在大型应用程序中创立可扩大的全局状态。然而,咱们能够在一个简略的待办应用程序中演示其性能。
实现后成果如下所示:
当初,删除 HelloWorld 文件:
rm src/components/HelloWorld.vue
TodoNew.vue
当初,增加一个新组件 TodoNew
,它负责创立新的待办事项。
touch src/components/TodoNew.vue
关上 TodoNew.vue
并输出以下内容:
// src/components/TodoNew.vue
<template>
<form @submit.prevent="addTodo">
<input
type="text"
placeholder="Enter a new task"
v-model="task"
/>
</form>
</template>
当初转到组件定义,有两个部分状态属性 -task
和给新待办事项提供惟一标识符的id
。
// src/components/TodoNew.vue
<template>...</template>
<script>
export default {data() {
return {
task: "",
id: 0
};
},
methods: {addTodo: function() {//}
}
};
</script>
定义 store 状态
过会,咱们会创立一个显示待办事项的组件。因为它和 TodoNew
组件都须要拜访雷同的数据,因而这是咱们在 Vuex 存储中保留的全局state
的现实抉择。
当初,回到 state
并定义属性状态。这里应用 Vux4 提供的 createStore
函数,该函数返回一个对象。该对象具备一个属性 todos
,它是一个空数组。
// src/store/index.js
import {createStore} from "vuex";
export default createStore({state () {
return {todos: []
}
}
});
定义 mutation
从准则 2 能够晓得,Vuex state 不能间接更改,须要定义 mutator
函数。
当初,咱们向 store
增加一个 mutation
属性,并增加一个函数属性 addTodo
。所有mutator
办法第一个参数。第二个可选参数是 store,第二个是传递的数据。
// src/store/index.js
import {createStore} from "vuex";
export default createStore({state () {
return {todos: []
}
},
mutations: {addTodo (state, item) {state.todos.unshift(item);
}
}
});
应用 commit 调用 mutation
当初,能够在 TodoNew
组件中应用它,在 TodoNew
组件定义一个 addTodo
办法。
要拜访 store
,咱们能够应用全局属性this.$store
。应用commit
办法创立一个新的 mutation
。须要传递了两个参数 - 首先是mutation
的名称,其次是咱们要传递的对象,是一个新的待办事项(由 id
和task
值组成)。
// src/components/TodoNew.vue
methods: {addTodo: function() {const { id, task} = this;
this.$store.commit("addTodo", { id, task});
this.id++;
this.task = "";
}
}
回顾
到目前为止:
- 用户将待办事项通过输入框输出,并绑定到
task
变量。 - 提交表单后,将调用
addTodo
办法 - 创立一个待办事项对象并将其“提交”到
store
中。
// src/components/TodoNew.vue
<template>
<form @submit.prevent="addTodo">
<input
type="text"
placeholder="Enter a new task"
v-model="task"
/>
</form>
</template>
<script>
export default {data() {
return {
task: "",
id: 0
};
},
methods: {addTodo: function() {const { id, task} = this;
this.$store.commit("addTodo", { id, task});
this.id++;
this.task = "";
}
}
};
</script>
读取 store 数据
当初,咱们曾经创立了用于增加待办事项的性能。接下来,就是把它们显示进去。
创立一个新组件TodoList.vue
文件。
touch src/components/TodoList.vue
内容如下:
// src/components/TodoList.vue
<template>
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{todo.description}}
</li>
</ul>
</template>
todos
是一个计算属性,咱们在其中返回 Vuex store 的内容。
// src/components/TodoList.vue
<script>
export default {
computed: {todos() {//}
}
};
</script>
定义 getters
与间接拜访 store
内容不同,getter
是相似于存储的计算属性的函数。在将数据返回到应用程序之前,这些工具非常适合过滤或转换数据。
例如,上面有 getTodos
,它返回未过滤的状态。在许多状况下,能够应用filter
或map
来转换此内容。
todoCount
返回 todo
数组的长度。
通过确保组件违心保留数据的本地正本,getter
有助于实现 准则 1 ,即繁多数据起源。
// src/store/index.js
export default createStore({
...
getters: {getTodos (state) {return state.todos;},
todoCount (state) {return state.todos.length;}
}
})
返回 TodoList
组件,咱们通过返回 this.$store.getters.getTodos
来实现性能。
// src/components/TodoList.vue
<script>
export default {
computed: {todos() {return this.$store.getters.getTodos;}
}
};
</script>
App.vue
要实现此应用程序,当初要做的就是导入并在 App.vue
中申明咱们的组件。
// src/App.vue
<template>
<div>
<h1>To-Do List</h1>
<div>
<TodoNew />
<TodoList />
</div>
</div>
</template>
<script>
import TodoNew from "@/components/TodoNew.vue";
import TodoList from "@/components/TodoList.vue";
export default {
components: {
TodoNew,
TodoList
}
};
</script>
你真的须要 Vuex 吗?
显然,在大型应用程序中,领有全局状态治理解决方案将有助于让咱们的应用程序可预测和可保护。
但对于比拟小的我的项目,有时候感觉应用 Vuex 太大材小用了,还这个还是大家跟着理论需要走比拟正当。
Vuex 的长处:
- 易于治理全局状态
- 弱小的调试全局状态
Vuex 的毛病:
- 额定的我的项目依赖
- 繁琐的模板
~ 完,我是刷碗智,刷碗去咯,下期见!
原文:https://vuejsdevelopers.com/2…
代码部署后可能存在的 BUG 没法实时晓得,预先为了解决这些 BUG,花了大量的工夫进行 log 调试,这边顺便给大家举荐一个好用的 BUG 监控工具 Fundebug。
交换
有幻想,有干货,微信搜寻 【大迁世界】 关注这个在凌晨还在刷碗的刷碗智。
本文 GitHub https://github.com/qq44924588… 已收录,有一线大厂面试残缺考点、材料以及我的系列文章。