Vuex 4 指南，使用 Vue3 的需要看看！

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"。组件必须从该位置读取应用程序数据，并且不能保留其自己的副本以防止冲突或分歧。

1. import { createStore } from "vuex"; 
2.  
3. // Instantiate our Vuex store 
4. const store = createStore({ 
5.  
6.   // "State" 组件的应用程序数据 
7.    
8.   state () { 
9.     return { 
10.       myValue: 0 
11.     }; 
12.   } 
13. }); 
14.  
15. // 组件从其计算的属性访问 state  
16. const MyComponent = {    
17.   template: "<div>{{ myValue }}</div>", 
18.   computed: { 
19.     myValue () { 
20.       return store.state.myValue; 
21.     }    
22.   }  
23. }; 

原则2：数据是只读的

组件可以从store中自由读取数据。但是不能更改 store 中的数据，至少不能直接更改。

取而代之的是，它们必须告知 store 要更改数据的意图，store由负责通过一组定义的功能(称为mutation)进行更改。

为什么采用这种方法?如果我们集中数据更改逻辑，那么在状态不一致的情况下，我们只需要在同一地方排查就行了，不用到具体的每个文件中。我们将某些随机组件(可能在第三方模块中)以意外方式更改数据的可能性降至最低。

1. const store = createStore({  
2.   state() {  
3.     return { 
4.       myValue: 0 
5.     }; 
6.   },  
7.   mutations: {  
8.     increment (state, value) {  
9.       state.myValue += value; 
10.     } 
11.   }  
12. }); 
13. // 需要更新值吗？ 
14. // 错误的，不要直接更改 store 值 
15. store.myValue += 10; 
16. // 正确的，调用正确的 mutations。 
17. 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/happy-williams-rdni7

如果大家自己的电脑尝试一波，那么可以使用下面的命令：

1. vue create vuex-example 

安装 Vuex

1. cd vuex-example 
2. npm i -S vuex@4 
3. npm run serve 

创建一个 Vuex store

现在，创建 Vuex store，在项目中创建 src/store/index.js：

1. mkdir src/store 
2. touch src/store/index.js 

打开文件并导入createStore方法。此方法用于定义store及其特性。现在，我们导出该store ，以便在Vue应用中能访问它。

1. // src/store/index.js 
2.  
3. import { createStore } from "vuex"; 
4.  
5. export default createStore({}); 

将 store 添加到 Vue 实例

为了可以从任何组件中访问 Vuex store，我们需要在主文件中导入 store 模块，并将store作为插件安装在主Vue实例上

1. // src/main.js 
2.  
3. import { createApp } from "vue"; 
4. import App from "@/App"; 
5. import store from "@/store"; 
6.  
7. const app = createApp(App); 
8.  
9. app.use(store); 
10.  
11. app.mount("#app"); 

创建一个简单的应用程序

如上所述，Vuex 的重点是通常在大型应用程序中创建可扩展的全局状态。但是，我们可以在一个简单的待办应用程序中演示其功能。

完成后效果如下所示：

现在，删除 HelloWorld 文件：

1. rm src/components/HelloWorld.vue 

TodoNew.vue

现在，添加一个新组件 TodoNew，它负责创建新的待办事项。

1. touch src/components/TodoNew.vue 

打开 TodoNew.vue 并输入以下内容：

1. // src/components/TodoNew.vue 
2.  
3. <template> 
4.   <form @submit.prevent="addTodo"> 
5.     <input 
6.       type="text" 
7.       placeholder="Enter a new task" 
8.       v-model="task" 
9.     /> 
10.   </form> 
11. </template> 

现在转到组件定义，有两个局部状态属性-task和给新待办事项提供唯一标识符的id。

1. // src/components/TodoNew.vue 
2.  
3. <template>...</template> 
4. <script> 
5. export default { 
6.   data() { 
7.     return { 
8.       task: "", 
9.       id: 0 
10.     }; 
11.   }, 
12.   methods: { 
13.     addTodo: function() { 
14.       // 
15.     } 
16.   } 
17. }; 
18. </script> 

定义 store 状态

 

过会，我们会创建一个显示待办事项的组件。由于它和TodoNew组件都需要访问相同的数据，因此这是我们在 Vuex 存储中保存的全局state 的理想选择。

现在，回到state并定义属性状态。这里使用 Vux4 提供的 createStore 函数，该函数返回一个对象。该对象具有一个属性 todos，它是一个空数组。

1. // src/store/index.js 
2. import { createStore } from "vuex"; 
3.  
4. export default createStore({ 
5.   state () { 
6.     return { 
7.       todos: [] 
8.     } 
9.   } 
10. }); 

定义 mutation

 

从原则2可以知道，Vuex state 不能直接更改，需要定义mutator函数。

现在，我们向store添加一个mutation属性，并添加一个函数属性addTodo。所有mutator方法第一个参数。第二个可选参数是 store，第二个是传递的数据。

1. // src/store/index.js 
2.  
3. import { createStore } from "vuex"; 
4.  
5. export default createStore({ 
6.   state () { 
7.     return { 
8.       todos: [] 
9.     } 
10.   }, 
11.   mutations: { 
12.     addTodo (state, item) { 
13.       state.todos.unshift(item); 
14.     } 
15.   } 
16. }); 

使用 commit 调用 mutation

 

现在，可以在TodoNew组件中使用它，在 TodoNew组件定义一个addTodo方法。

要访问store ，我们可以使用全局属性this.$store。使用commit方法创建一个新的mutation。需要传递了两个参数-首先是mutation的名称，其次是我们要传递的对象，是一个新的待办事项(由id和task值组成)。

1. // src/components/TodoNew.vue 
2. methods: { 
3.   addTodo: function() { 
4.     const { id, task } = this; 
5.     this.$store.commit("addTodo", { id, task }); 
6.     this.id++; 
7.     this.task = ""; 
8.   } 
9. } 

回顾

 

到目前为止：

1. 鸿蒙官方战略合作共建——HarmonyOS技术社区
2. 用户将待办事项通过输入框输入，并绑定到 task 变量。
3. 提交表单后，将调用addTodo方法
4. 创建一个待办事项对象并将其“提交”到store中。

1. // src/components/TodoNew.vue 
2. <template> 
3.   <form @submit.prevent="addTodo"> 
4.     <input 
5.       type="text" 
6.       placeholder="Enter a new task" 
7.       v-model="task" 
8.     /> 
9.   </form> 
10. </template> 
11. <script> 
12. export default { 
13.   data() { 
14.     return { 
15.       task: "", 
16.       id: 0 
17.     }; 
18.   }, 
19.   methods: { 
20.     addTodo: function() { 
21.       const { id, task } = this; 
22.       this.$store.commit("addTodo", { id, task }); 
23.       this.id++; 
24.       this.task = ""; 
25.     } 
26.   } 
27. }; 
28. </script> 

读取 store 数据

现在，我们已经创建了用于添加待办事项的功能。接下来，就是把它们显示出来。

创建一个新组件TodoList.vue 文件。

1. touch src/components/TodoList.vue 

内容如下：

1. // src/components/TodoList.vue 
2. <template> 
3. <ul> 
4.   <li 
5.     v-for="todo in todos" 
6.     :key="todo.id" 
7.   > 
8.     {{ todo.description }} 
9.   </li> 
10. </ul> 
11. </template> 

todos是一个计算属性，我们在其中返回Vuex store 的内容。

1. // src/components/TodoList.vue 
2.  
3. <script> 
4. export default { 
5.   computed: { 
6.     todos() { 
7.       //  
8.     } 
9.   } 
10. }; 
11. </script> 

定义 getters

 

与直接访问store 内容不同，getter是类似于存储的计算属性的函数。在将数据返回到应用程序之前，这些工具非常适合过滤或转换数据。

例如，下面有getTodos，它返回未过滤的状态。在许多情况下，可以使用filter或map来转换此内容。

todoCount返回todo数组的长度。

通过确保组件愿意保留数据的本地副本，getter有助于实现原则1，即单一数据来源。

1. // src/store/index.js 
2.  
3. export default createStore({ 
4.   ... 
5.   getters: { 
6.     getTodos (state) { 
7.       return state.todos; 
8.     }, 
9.     todoCount (state) { 
10.       return state.todos.length; 
11.     } 
12.   } 
13. }) 

返回TodoList组件，我们通过返回this.$store.getters.getTodos来完成功能。

1. // src/components/TodoList.vue 
2.  
3. <script> 
4. export default { 
5.   computed: { 
6.     todos() { 
7.       return this.$store.getters.getTodos; 
8.     } 
9.   } 
10. }; 
11. </script> 

App.vue

 

要完成此应用程序，现在要做的就是导入并在App.vue中声明我们的组件。

1. // src/App.vue 
2.  
3. <template> 
4.   <div> 
5.     <h1>To-Do List</h1> 
6.     <div> 
7.       <TodoNew /> 
8.       <TodoList /> 
9.     </div> 
10.   </div> 
11. </template> 
12. <script> 
13. import TodoNew from "@/components/TodoNew.vue"; 
14. import TodoList from "@/components/TodoList.vue"; 
15.  
16. export default { 
17.   components: { 
18.     TodoNew, 
19.     TodoList 
20.   } 
21. }; 
22. </script> 

你真的需要Vuex吗?

显然，在大型应用程序中，拥有全局状态管理解决方案将有助于让我们的应用程序可预测和可维护。

但对于比较小的项目，有时候觉得使用 Vuex 太大材小用了，还这个还是大家跟着实际需求走比较合理。

Vuex的优点：

• 易于管理全局状态
• 强大的调试全局状态

Vuex的缺点：

• 额外的项目依赖
• 繁琐的模板

~ 完， 我是刷碗智，刷碗去咯，下期见!

作者：Anthony Gore 译者：前端小智 来源：vuejsdevelopers

原文：https://vuejsdevelopers.com/2017/05/15/vue-js-what-is-vuex/

原文链接：https://mp.weixin.qq.com/s/iOhlnLvhCMFFi8XD-bmUjQ