在Vue的开发过程中，状态管理是一个极其重要的问题。Vue通过组件化的设计，使得前端应用开发更为灵活和高效。然而，随着应用的复杂度不断增加，组件与组件之间的状态交互如何有效管理、传递和维护就成为了一个难点。Vuex就是为了解决这个难点而生。
什么是Vuex
Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。在实际开发中，Vuex可以使得组件之间的通信更高效、更可靠，同时也可方便地处理应用级全局状态。
Vuex 核心概念
可以将Vuex的核心概念分为以下几个部分：
- State (状态)
- Mutation (变更)
- Action (动作)
- Getter (派生)
State
state是一个储存数据的对象，提供唯一的数据源。每个Vue应用都应该有一个store实例作为唯一的状态树。store是用于管理应用中所需要共享的数据源。
Vuex通过store选项，将 state 对象传递给vue根实例，使得所有子组件都能够访问到该状态。例如：
-- -------------------- ---- ------- -- -- ----- ----- - - ------ - - -- ----- -- ----- ----- - --- ------------ ----- -- -- ------ ----- --- - --- ----- --- ------- ------ -- --- --展开代码
这里的 store 实例包含了全部应用级的store状态（即state）。
Mutation
Mutation是更改state的唯一方法。它需要遵守Vuex的响应式规则。只有Mutation中定义的函数才能够修改state里面的数据。Mutation中代码的优点是可以对状态的变化做出记录。
// Mutations const mutations = { increment (state) { state.count++ } }
Mutation本质上是一个修改状态的方法，它可以接受额外的参数，以达到数据修改的目的，同时可以将记录所需数据的变量封装在Mutation函数中。例如：
-- -------------------- ---- ------- -- --------- ----- --------- - - -- -- --------- ------- -- - ----------- -- - -- -- -- --------- ------- -- - ----------- -- - - -展开代码
Action
Action提供了类似于Mutation的修改数据的方法，但是它不能直接修改state里的数据，而是通过Mutation来修改数据。Action也同样可以接受额外的参数，可以异步地触发Mutation，同时Action也可以通过Promise返回Mutation的数据。
// Actions const actions = { increment ({ commit }, payload) { commit('increment', payload) } }
上面的例子中，Payload是Mutation的辅助函数。
Getter
Getter可以看作是state的计算属性。与组件中的计算属性类似，它们的返回值会根据它们的依赖被缓存起来，且只有当它的依赖值发生了改变，才会被重新计算。Getter可以接受其他Getter作为第二个参数。例如：
-- -------------------- ---- ------- -- ------- ----- ------- - - -- --- ---------- ----- -- - ------ ----------------------- -- ---------- -- -- --- --------------- ------- -------- -- - ------ ------------------------ - -- --- -展开代码
Vuex的实际应用
下面通过一个todoList的demo来说明Vuex如何在实际开发中使用。
首先是state：
// state const state = { todoList: [], showComplete: false }
从上述State中可以看出，该示例包含了一个 todoList ，它是一个数组类型，保存待办事项的信息。该State还包含了一个展示完成状态 showComplete，用于控制待办事项列表是否展示已经完成状态的事项。
接下来，是Mutation：
-- -------------------- ---- ------- -- -------- ----- --------- - - ----------- ------- --------- - -------------- - -------- -- --------------- ------- ------------- - ------------------ - ------------ -- ---------- ------- --- - ----- ---- - ------------------------ -- ------- --- --- ------------- - -------------- -- ------- ------- ----- - ------------------------- - -展开代码
Mutation中主要包含了对todoList数组、showComplete的修改操作，例如添加、删除、改变状态等。例如，setTodoList函数通过设置State中的 todoList 数组实现添加一个新的todo：
// 设置 todoList setTodoList (state, todoList) { state.todoList = todoList }
对于添加新todo的操作，Mutation中也需要一个处理函数：
// 添加 todo addTodo (state, todo) { state.todoList.push(todo) }
接下来需要定义一些Action来触发Mutation：
-- -------------------- ---- ------- -- ------- ----- ------- - - ---------- -- ------ -- - -- ------------ --------------------------- -- - -- --------------------- -------- --------------------- ------ -- -- ------- -- ------ -- -------- - -- -------- ------------------------------------ -- - -- ---------- ------- -------- ----------------- ------------- -- - -展开代码
从上面的代码可以看出，Action方法 fetchTodos() 将 API 获得的todo列表传递给 Mutation setTodoList()。而Action方法 addTodo() 通过提交一个新的todo触发Mutation 'addTodo()`。这样，当修改state的操作需要通过异步的实现等，Action就尤为重要了。
最后，还需要定义一些Getter来获取State中的数据：
// getters const getters = { todoList: state => state.todoList.filter(todo => { return state.showComplete ? true : !todo.complete }), completedTodoCount: state => state.todoList.filter(todo => todo.complete).length, showComplete: state => state.showComplete, }
通过上面的Getter，就可以方便地获取到待办事项列表、已完成待办事项数量、是否展示未完成待办事项等数据。
Vuex 与 Vue-Router
在实际应用Vue-Router时，使用Vuex进行状态管理是一个非常高效的方式。实际上，Vue.js官方的脚手架程序Vue-CLI内置了Vue-Router和Vuex，并且对于Vuex状态统一存储的代码结构也有各种规范和约定。以Vue-CLI 4.x的模板程序为例，Vuex和Vue-Router的使用方式如下：
Vuex
在src目录下，新建store目录，并在其中创建一个store.js文件：
-- -------------------- ---- ------- ------ --- ---- ----- ------ ---- ---- ------ ------ ------- ---- ----------- ------ ------- ---- ----------- ------ --------- ---- ------------- ------------- ----- ----- - - -- --- - ------ ------- --- ------------ ------ -------- ---------- -------- ------- -------------------- --- ------------ --展开代码
以上的代码片段展示了如何定义一个具有State、Getter、Mutation和Action的Store实例对象。在组件中使用时只需要通过 import store from '@/store' 将该Store实例引入即可。
Vue-Router
在src目录下，新建router目录，并在其中创建一个index.js文件：
-- -------------------- ---- ------- ------ --- ---- ----- ------ --------- ---- ------------ ------ ---- ---- ------------------ ------------------ ----- ------ - - - ----- ---- ----- ------- ---------- ---- -- -- --- - ----- ------ - --- ----------- ----- ---------- ----- --------------------- ------ -- ------ ------- ------展开代码
以上代码片段显示了如何定义Vue-Router的路由规则，并且将router对象导出，然后再在组件中引入即可。
总结
以上内容全面介绍了Vuex在Vue应用的状态管理中的优势和应用方式，其能够帮助我们更加方便、高效、优雅地处理Vue应用中的数据状态。随着Vue技术的不断深入，在Vuex等状态处理机制方面的应用也将越来越深入，为Vue开发提供更多的想象空间。
最后，附上完整的vue项目示例代码：
Vue Vuex 示例项目：https://github.com/DeepLush/vue-vuex-demo
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6483a12348841e98942f63ce
