什么是 Vuex
Vuex 是一个 Vue.js 应用程序开发的状态管理库。它针对单页应用程序的共享状态进行设计。这个库集中于管理应用程序的各种组件之间的共享数据，避免了用多年眼泪痛苦地将数据从父组件传递到孙子组件。
Vuex 中的组件
Vuex 有四个组件：
- state：驱动应用的数据源；
- getters：从 state 中计算出来的属性值；
- mutations：强制改变 state 的唯一方式；
- actions：类似 mutations ，但处理异步任务。
Vuex 中的 state
Vuex 的核心是存储（state）数据源。通常情况下，一个 Vue 组件中的数据源只在这个组件中有效。Vuex 的存储数据源可以在任何组件中使用，无需传递数据，很好地解决了共享状态的问题。
// Vuex 中的 state
const store = new Vuex.Store({
state: {
count: 0
}
})Vuex 中的 getters
Getters 从 state 中获取某些值。当这些值是由其他的状态派生而来时，它们与计算属性类似。
-- -------------------- ---- -------
-- ---- -- -------
----- ----- - --- ------------
------ -
------ -
- --- -- ----- ------ ------- --
- --- -- ----- ------ ----- --
- --- -- ----- ------ -- ---- -
-
--
-------- -
---------- ----- -- -
------ ----------------------- -- ----------
-
-
--Vuex 中的 mutations
Mutations 用于修改 state 的唯一方式，需要注意的是同步操作。如果你需要执行异步操作，请使用actions。
mutations 是 vuex 中唯一修改 state 的方法。
-- -------------------- ---- -------
-- ---- -- ---------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
-
--
-------------------------Vuex 中的 actions
Actions 是在 mutations 基础上，处理异步任务的方法。它的主要任务是提交 mutations。
-- -------------------- ---- -------
-- ---- -- -------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
-
-
--
--------------------------------Vuex 的简单示例
-- -------------------- ---- -------
--------- -----
------
------
------------- ---- ---------------
-------
------
---- ---------
----------- ------ -- ------------------ -------
------- ----------------------------------------------------------
------- -------------------------------------------------------- --------------
------
------- ------------------------------------------------------------
------- --------------------------------------------------------------
--------
----- ----- - --- ------------
------ -
------ -
--
---------- -
--------- ------- -
-------------
-
--
-------- -
-------------- -- ------ -- -
------------- -- -
-------------------
-- -----
-
-
--
--- -----
--- -------
------ -----
--
---------
-------
-------总结
使用 Vuex 可以使你更好地处理 Vue 应用程序中的组件之间的共享数据，这减少了代码量和代码复杂度，也让代码更加易于维护。如果你正在构建一个大型 Vue 应用程序，那么 Vuex 绝对是一个好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646e891c968c7c53b0cefccc