在 Vue.js 开发中，我们经常需要在非父子组件之间共享状态，比如登陆状态、购物车数量等等。而在 Vue.js 中，父组件向子组件传递数据非常容易，只需要使用 props 即可。但是，如果我们需要在兄弟组件或者更深层级的组件之间传递数据，就需要使用 Vuex 状态管理来解决这个问题。
什么是 Vuex？
Vuex 是一个专门为 Vue.js 设计的状态管理库，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。这样，我们就可以在任何组件中使用相同的状态，而不需要通过 props 或者自定义事件来传递数据。
Vuex 的核心概念
在使用 Vuex 之前，我们需要了解一些它的核心概念。
state
state 是 Vuex 存储状态的地方，它类似于组件中的 data，但是它是全局共享的，任何组件都可以访问它。我们可以通过 store.state.xxx 来访问其中的数据。
mutations
mutations 是 Vuex 中用于修改 state 的方法，它类似于组件中的 methods。但是，mutations 只能进行同步操作，不能进行异步操作。我们可以通过 store.commit('xxx') 来触发其中的方法。
actions
actions 是 Vuex 中用于处理异步操作的方法，它类似于 mutations，但是它可以进行异步操作。我们可以通过 store.dispatch('xxx') 来触发其中的方法。
getters
getters 是 Vuex 中用于从 state 中派生出一些状态的方法，它类似于计算属性。我们可以通过 store.getters.xxx 来访问其中的数据。
modules
modules 是 Vuex 中用于将 store 分割成模块的方法，每个模块都有自己的 state、mutations、actions、getters。这样，我们就可以将大型应用程序分割成更小的、可重用的部分。
使用 Vuex 解决非父子组件传值的问题
现在，我们来看一个实际的例子，假设我们有一个购物车页面，其中包含了商品列表和购物车数量。我们需要在商品列表组件和购物车数量组件之间共享购物车数量。
1. 创建 store
首先，我们需要创建一个 Vuex store，用于存储购物车数量。
-- -------------------- ---- -------
------ --- ---- -----
------ ---- ---- ------
-------------
------ ------- --- ------------
------ -
---------- -
--
---------- -
------------ ------- ------ -
--------------- - -----
-
-
--在上面的代码中，我们定义了一个名为 cartCount 的状态，用于存储购物车数量。同时，我们定义了一个名为 setCartCount 的 mutation，用于修改 cartCount 的值。
2. 在组件中使用 store
现在，我们需要在商品列表组件和购物车数量组件中使用 store。我们可以通过在组件中使用 computed 属性来访问 store 中的状态。
-- -------------------- ---- -------
----------
-----
----
--- ----------- -- ------ ---------------
-- --------- --
------- ---------------------------------------
-----
-----
------
-----------
--------
------ ------- -
--------- -
--------- -- -
------ ---------------------------
-
--
-------- -
--------- ------ -
---------------------------------- -------------- - --
-
-
-
---------在上面的代码中，我们在商品列表组件中定义了一个名为 cartCount 的 computed 属性，用于访问 store 中的 cartCount 状态。同时，我们定义了一个名为 addToCart 的方法，用于将商品添加到购物车中，并通过 store.commit 方法来修改 cartCount 的值。
-- -------------------- ---- -------
----------
-----
----------- --------- ------
------
-----------
--------
------ ------- -
--------- -
--------- -- -
------ ---------------------------
-
-
-
---------在购物车数量组件中，我们也定义了一个名为 cartCount 的 computed 属性，用于访问 store 中的 cartCount 状态。这样，我们就可以在两个组件中共享购物车数量了。
结语
使用 Vuex 状态管理库可以帮助我们轻松地解决非父子组件之间传递数据的问题，让我们的应用程序更加简洁、高效。在实际开发中，我们可以根据具体的业务需求来选择使用 Vuex 或者其他状态管理库。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d93dd4a941bf71340d0f86
