文章目录
- 一、理解 Vuex
- 1. 是什么
- 2. 什么时候用
- 二、Vuex 工作原理
- 三、Vuex 环境搭建
- 四、四个 map 方法的使用
- 五、模块化 + 命名空间
一、理解 Vuex
1. 是什么
Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式的管理（读 / 写），适用于任意组件间的通信
https://github.com/vuejs/vuex
2. 什么时候用
- 多个组件依赖同一状态
- 来自不同组件的行为需要变更同一状态
二、Vuex 工作原理
三、Vuex 环境搭建
npm install vuex
vue2 — — vuex3
vue3 — — vuex4
-
创建文件
src\store\index.js文件
-
在main.js 文件中创建 vm 时传入 store
四、四个 map 方法的使用
-
mapState 方法：用于帮助我们映射
state中的数据为计算属性
-
mapGetters 方法：用于帮助我们映射`getterrs·中的数据为计算属性
-
mapActions 方法：用于帮助我们生成与
actions对话的方法，即：包含$store.dispath(xxx)的函数
-
mapMutations 方法：用于帮助我们生成与
mutations对话的方法，即：包含$store.commit(xxx)的函数
备注：mapActions 与 mapMutations 使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。
五、模块化 + 命名空间
-
目的：让代码更好维护，让多种数据分类更加明确
-
修改
store.js
-
开启命名空间后，组件中读取 state 数据
-
开启命名空间后，组件中读取 getters 数据
-
开启命名空间后，组件中调用 dispatch
-
开启命名空间后，组件中调用 commit
