随着前端单页面应用（SPA）的日益普及，组件化开发已经成为前端开发的趋势。但是，当我们需要组件之间共享数据时，不同组件之间的通信成为了一个问题。
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它可以让我们更加清晰地组织代码，使得多个组件可以共享同一个状态，并且在状态变化时也可以自动更新组件。
下面，我们来学习一下如何使用 Vuex 实现组件间的数据共享。
安装和使用 Vuex
在使用 Vuex 之前，我们需要先安装它。可以通过 npm 或 yarn 进行安装：
npm install vuex --save
或者
yarn add vuex
安装完成之后，我们需要在 Vue 实例中引入 Vuex：
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
创建一个 Vuex store
在使用 Vuex 之前，我们需要先创建一个 Vuex store。在 store 中存储着我们的应用程序中所有需要共享的状态。
我们可以通过传递一个对象来创建一个 Vuex store。对象中包含了 state、getters、mutations 和 actions 四个属性。下面我们分别解释一下这四个属性：
state：存储着我们的应用程序中需要共享的状态。
getters：从 state 中派生出一些状态。主要用于对 store 中的状态进行过滤、计算和处理，并返回结果。
mutations：用于修改 state 中的状态。只能通过调用 mutations 中的函数来修改 state 中的状态，且必须是同步操作。
actions：用于触发 mutations 中的函数，并且可以包含任意异步操作。
下面是一个简单的 Vuex store 示例：
-- -------------------- ---- -------
----- ----- - --- ------------
------ -
------ -
--
-------- -
--------- ----- -- -----------
--
---------- -
---------------- -
-------------
--
---------------- -
-------------
-
--
-------- -
------------------------ -
------------- -- -
-------------------
-- -----
-
-
--在组件中使用 Vuex
在组件中使用 Vuex 需要使用“辅助函数”来引入状态，这些辅助函数可以帮助我们更方便地获取 state 中的状态、触发 mutations 中的函数以及派发 actions 中的函数。
mapState：将 state 中的状态映射为计算属性；
mapGetters：将 getters 中的状态映射为计算属性；
mapMutations：将 mutations 中的函数映射为 methods；
mapActions：将 actions 中的函数映射为 methods。
下面是一个使用 mapState 和 mapMutations 辅助函数的例子：
-- -------------------- ---- -------
------ ---------- ------------- ---- ------
------ ------- -
--------- -
-----------------------
--
-------- -
----------------------------- -------------
-
-其中，mapState 辅助函数中传入一个数组，数组中每个元素是一个字符串，表示映射到计算属性中的名称。mapMutations 辅助函数中传入一个数组，数组中每个元素是一个字符串，表示映射到 methods 中的名称。
使用 Vuex 实现组件间数据共享
在一个 Vue.js 应用程序中，当一个组件拥有一些需要共享的状态时，可以通过将这些状态保存在 Vuex store 中，并且将对 store 的修改、查询、删除等操作通知到 store 中去，从而实现多个组件之间的共享访问。
下面，我们通过一个购物车案例来演示如何使用 Vuex 实现组件间数据共享的方法。
设计 store 中的 state
在购物车案例中，我们需要存储购物车中的商品，以及计算购物车总价、总数量等信息。所以，我们可以将 store 中的 state 设计如下：
const store = new Vuex.Store({
state: {
cartList: [],
}
})实现添加商品至购物车
在购物车页面中，用户可以将物品添加至购物车，并且每添加一个商品，我们需要将其保存到 store 中，并且计算购物车中的总件数和总价格。下面是实现方法：
-- -------------------- ---- -------
-- ---------
---------- -
-------------- -------- -
--- ------------ - ------------------------ -- ------- --- -----------
-- -------------- -
--------------------
- ---- -
------------- - -
--------------- - ----
----------------------------
-
-
-
-- -------
-------- -
---------------- -------- -
------ --- ----------------- ------- -- -
--- ------------ - -------------------------------- -- ------- --- -----------
-- -------------- -
-------------------------- -------------
- ---- -
------------------------- --------
-
---------------
--
-
-当用户点击添加购物车时，页面需要派发 addCart 函数，这个函数触发了 mutations 中的 addCart 函数。在 addCart 函数中，我们首先查找购物车中是否已经存在该商品，如果存在，只需要让该商品数量加一即可；如果不存在，我们要将商品添加到 store 的 cartList 中，并且设置 count 为 1，checked 为 true。
在购物车页面中读取购物车商品数量和商品列表
在购物车页面，我们需要读取购物车中商品的列表和数量，以及计算总价格。可以通过 mapState 和 mapGetters 辅助函数来实现。下面是实现方法：
-- -------------------- ---- -------
-- ---------
------ - --------- ----------- ---------- - ---- ------
-- ---------
--------- -
---------------
------------
-----------
----------------
------------------
------------
--
--
-- ------------------
------ ------- -
--------- -
-------------
----------
--
-
-在计算购物车商品数量的 mapGetters 中，我们通过传入一个数组，数组中包含了映射的名称，这些名称可以实现在计算属性中获取。
在获取购物车中商品数量和购物车商品列表的 mapState 中，我们同样将需要映射的名称通过数组方式传递给 mapState，这些名称被映射为计算属性。
实现购物车全选、反选和删除商品的功能
在购物车页面中，用户可以全选、反选和删除商品。这些操作需要操作 cartList 中的某个商品的 checked 属性，并且更新 store 中的总价格和 count。
为了方便实现，在 store 中，我们可以定义两个计算属性，分别计算购物车中已选择和未选择的商品总数。
下面是 mapActions 和 mapGetters 实现购物车全选、反选和删除商品的功能：
-- -------------------- ---- -------
-- ---------
------ - ----------- ---------- - ---- ------
-------- -
-- -----
---------- -
-------------------------- -- -
------------ - ----------------
--
--
-- ----
--------------- -
--- -------- - ------------------------- -- --------------
--------------------------
--
-- ----
------------------- -
------------ - -------------
-
--
-- -------------
--------- -
---------------
-------------
------------
----------------
------------------
------------
--
--
-- -----
-------- -
---------------
-------------
---
---------- -
------------------------------------- -----------------
-
--在通过 mapActions 获取购物车中已选择和未选择商品数量时，我们同样需要传入一个数组参数，数组中包含了需要获取的状态的名称。mapActions 将这些名称映射为 methods 来进行使用。
总结
通过本文，我们学习了如何使用 Vuex 实现组件间数据共享的方法，我们了解了 Vuex 的核心概念和基本用法，学会了如何在 Vuex 中定义 state、getters、mutations 和 actions，以及在组件中使用 mapState、mapGetter、mapMutations 和 mapActions 等辅助函数来实现对 store 中的状态进行修改和获取。
在实践中，使用 Vuex 可以帮助我们更好地组织代码，并且让多个组件之间可以共享同一个状态，同时将状态的修改、查询、删除等操作通知到 store 中，简化了组件之间的通信逻辑，确保了应用程序的可维护性和可扩展性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb74a65ad90b6d0420ab5d