篇章十一 Vuex

一、理解 Vuex

1. 是什么

Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读 / 写），适用于任意组件间的通信
https://github.com/vuejs/vuex

2. 什么时候用

1. 多个组件依赖同一状态
2. 来自不同组件的行为需要变更同一状态

二、Vuex 工作原理

三、Vuex 环境搭建

npm install vuex
vue2 — — vuex3
 vue3 — — vuex4

1. 创建文件 src\store\index.js 文件
   
   

2. 在main.js 文件中创建 vm 时传入 store
   

四、四个 map 方法的使用

1. mapState 方法：用于帮助我们映射state中的数据为计算属性
   

2. mapGetters 方法：用于帮助我们映射`getterrs·中的数据为计算属性
   

3. mapActions 方法：用于帮助我们生成与 actions对话的方法，即：包含 $store.dispath(xxx)的函数
   

4. mapMutations 方法：用于帮助我们生成与 mutations对话的方法，即：包含 $store.commit(xxx)的函数
   

备注：mapActions 与 mapMutations 使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。

五、模块化 + 命名空间

1. 目的：让代码更好维护，让多种数据分类更加明确

2. 修改 store.js
   

3. 开启命名空间后，组件中读取 state 数据
   

4. 开启命名空间后，组件中读取 getters 数据
   

5. 开启命名空间后，组件中调用 dispatch
   

6. 开启命名空间后，组件中调用 commit
   文章来源地址https://uudwc.com/A/Bnznz