Vuex

一、概念
在Vue中实现集中式状态（数据）管理的一个Vue插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式，且适用于任意组件间通信
二、什么时候使用Vuex
1.多个组件依赖于同一状态
2.来自不同组件的行为需要变更同一状态
三、搭建vuex环境
1、安装npm i vuex@3
注意：vue2中要用vuex3的版本
vue3中要用vuex4的版本
（一）、创建文件：src/store/index.js
2、//引入Vuex
import Vuex from 'vuex'
3、//应用Vuex插件
Vue.use(Vuex)—此时就可传入store配置项
4、//准备actions对象——响应组件中用户的动作
const actions = {}
//准备mutations对象——修改state中的数据
const mutations = {}
//准备state对象——保存具体的数据
const state = {}
5、//创建并暴露store
export default new Vuex.Store({
actions,
mutations,
state
})
（二）、在main.j中创建vm时传入store配置项
6、//引入store
import store from './store/index.js'
7、//创建vm
new Vue({
el:'#app',
render: h => h(App),
store
})
四、基本使用
1、初始化数据、配置actions、配mutations，操作文件store.js
2、组件中读取vuex中的数据：$store.state.sum
3、组件中修改vuex中的数据：$store.dispatch('action中的方法名',数据) 或 $store.commit('mutations中的方法名',数据)
备注：若没有网络请求或其他业务逻辑，组件中也可以越过actions，即不写dispatch，直接编写commit
五、getters的使用
概念：当state中的数据需要经过加工后再使用时，可以使用getters加工
在store.js中追加getters配置；组件中读取数据：$store.getters.bigSum
六、四个map方法
mapState方法：用于帮助我们映射state中的数据为计算属性
mapGetters方法：用于帮助我们映射getters中的数据为计算属性
mapActions方法：用于帮助我们生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数
mapMutations方法：用于帮助我们生成与mutations对话的方法，即：包含$store.commit(xxx)的函数
备注：mapActions与mapMutations使用时，若需要传递参数需要：在模板中绑定事件时传递好参数，否则参数是事件对象。
七、模块化+命名空间
目的：让代码更好维护，让多种数据分类更加明确
修改store.js
开启命名空间后，组件中读取state数据；
开启命名空间后，组件中读取getters数据；
开启命名空间后，组件中调用dispatch；
开启命名空间后，组件中调用commit