在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中代码的优点是可以对状态的变化做出记录。
-- ---------
----- --------- - -
--------- ------- -
-------------
-
-Mutation本质上是一个修改状态的方法，它可以接受额外的参数，以达到数据修改的目的，同时可以将记录所需数据的变量封装在Mutation函数中。例如：
-- ---------
----- --------- - -
-- --
--------- ------- -- -
----------- -- -
--
-- --
--------- ------- -- -
----------- -- -
-
-Action
Action提供了类似于Mutation的修改数据的方法，但是它不能直接修改state里的数据，而是通过Mutation来修改数据。Action也同样可以接受额外的参数，可以异步地触发Mutation，同时Action也可以通过Promise返回Mutation的数据。
-- -------
----- ------- - -
--------- -- ------ -- -------- -
------------------- --------
-
-上面的例子中，Payload是Mutation的辅助函数。
Getter
Getter可以看作是state的计算属性。与组件中的计算属性类似，它们的返回值会根据它们的依赖被缓存起来，且只有当它的依赖值发生了改变，才会被重新计算。Getter可以接受其他Getter作为第二个参数。例如：
-- -------
----- ------- - -
-- ---
---------- ----- -- -
------ ----------------------- -- ----------
--
-- ---
--------------- ------- -------- -- -
------ ------------------------
-
-- ---
-Vuex的实际应用
下面通过一个todoList的demo来说明Vuex如何在实际开发中使用。
首先是state：
-- -----
----- ----- - -
--------- ---
------------- -----
-从上述State中可以看出，该示例包含了一个 todoList ，它是一个数组类型，保存待办事项的信息。该State还包含了一个展示完成状态 showComplete，用于控制待办事项列表是否展示已经完成状态的事项。
接下来，是Mutation：
-- --------
----- --------- - -
----------- ------- --------- -
-------------- - --------
--
--------------- ------- ------------- -
------------------ - ------------
--
---------- ------- --- -
----- ---- - ------------------------ -- ------- --- ---
------------- - --------------
--
------- ------- ----- -
-------------------------
-
-Mutation中主要包含了对todoList数组、showComplete的修改操作，例如添加、删除、改变状态等。例如，setTodoList函数通过设置State中的 todoList 数组实现添加一个新的todo：
-- -- --------
----------- ------- --------- -
-------------- - --------
-对于添加新todo的操作，Mutation中也需要一个处理函数：
-- -- ----
------- ------- ----- -
-------------------------
-接下来需要定义一些Action来触发Mutation：
-- -------
----- ------- - -
---------- -- ------ -- -
-- ------------
--------------------------- -- -
-- --------------------- --------
--------------------- ------
--
--
------- -- ------ -- -------- -
-- --------
------------------------------------ -- -
-- ---------- ------- --------
----------------- -------------
--
-
-从上面的代码可以看出，Action方法 fetchTodos() 将 API 获得的todo列表传递给 Mutation setTodoList()。而Action方法 addTodo() 通过提交一个新的todo触发Mutation 'addTodo()`。这样，当修改state的操作需要通过异步的实现等，Action就尤为重要了。
最后，还需要定义一些Getter来获取State中的数据：
-- -------
----- ------- - -
--------- ----- -- -------------------------- -- -
------ ------------------ - ---- - --------------
---
------------------- ----- -- -------------------------- -- ----------------------
------------- ----- -- -------------------
-通过上面的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