Vuex 1. 概念实现集中式状态（数据）管理的一个插件，对vue应用中多个组件的共享状态进行集中式的管理（读/写），也是一种组件间通信的方式（适用于任意组件间通信）2. 搭建vuex环境安装（以vue2为例）：npm i vuex@3index.jsimport Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //用于响应组件中的动作 const actions = { } //用于操作数据 const mutations = { } //用于存储数据 const state = { } //创建并暴露store export default new Vuex.Store({ actions,mutations,state })main.jsimport Vue from 'vue' import App from './App.vue' import store from './store' //关闭生产提示 Vue.config.productionTip =false new Vue({ el: '#app', render: h => h(App), store })3. 基本使用（1）配置actions,mutations,stateimport Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) //用于响应组件中的动作 const actions = { increment(context,value) { console.log('actions中的increment被调用') context.commit('INCREMENT', value) }, decrement(context,value) { context.commit('DECREMENT', value) }, incrementOdd(context,value) { if (context.state.sum % 2) { context.commit('INCREMENTODD', value) } }, incrementWait(context,value) { setTimeout(() => { context.commit('INCREMENTWAIT', value) }, 500) } } //用于操作数据 const mutations = { INCREMENT(state,value) { console.log('mutations中的INCREMENT被调用') state.sum += value }, DECREMENT(state,value) { state.sum -= value }, INCREMENTODD(state,value) { state.sum += value }, INCREMENTWAIT(state,value) { state.sum += value } } //用于存储数据 const state = { //当前的和 sum: 0, } //创建并暴露store export default new Vuex.Store({ actions,mutations,state })（2）组件中读取vuex中的数据：$store.state.sum（3）组件中修改vuex中的数据：$store.dispatch('方法名（小写）', 数据) 或 this.$store.commit('方法名（大写）', 数据)​ 注：若没有网络请求或其他业务逻辑，组件中可以跳过actions（即不写dispatch），直接（调用mutations）commit4. getters的使用（1）概念：当state中的数据需要经过加工后再使用时，可以使用getters（2）在store中追加getters配置//用于加工state中的数据 const getters = { bigSum(state) { return state.sum * 10 } } //创建并暴露store export default new Vuex.Store({ actions,mutations,state,getters })（3）组件中读取数据：$store.gettes.bigSum5. 四个map方法的使用（1）mapState（映射state中的属性为计算属性）//借助mapState生成计算属性，从state中读取数据 //对象写法 ...mapState({sum:'sum',school:'school',subject:'subject'}) //数组写法 ...mapState(['sum','school','subject']),（2）mapGetters（映射getters中的数据为计算属性）//借助mapGetters生成计算属性，从getter中读取数据 //对象写法 ...mapGetters({bigSum:'bigSum'}) //数组写法 ...mapGetters(['bigSum'])（3）mapMutations 用于帮助生成与mutations对话的方法，即：包含$store.commit(xxx)的函数//借助mapMutations生成对应的方法，方法中会调用commit去联系mutations //对象写法 ...mapMutations({increment:'INCREMENT',decrement:'DECREMENT'}), //数组写法 ...mapMutations(['INCREMENT','DECREMENT']),（4）mapActions 用于帮助生成与actions对话的方法，即：包含$store.dispatch(xxx)的函数//借助mapActions生成对应的方法，方法中会调用dispatch去联系actions //对象写法 ...mapActions({incrementOdd:'incrementOdd',incrementWait:'incrementWait'}), //数组写法 ...mapActions(['incrementOdd','incrementWait'])注：使用mapMutations与mapActions 时，若需要传递参数，需要在模板中绑定事件时就传递，否则默认的传参为时间对象6. 模块化、命名空间（1）目的：便于代码维护，数据分类更加明确（2）修改store/index.jsindex.jsimport Vue from 'vue' import Vuex from 'vuex' //求和相关 import countOptions from './count' //人员管理相关 import personOptions from './person' Vue.use(Vuex) //创建并暴露store export default new Vuex.Store({ modules: { countOptions, personOptions } })count.jsexport default { //开启命名空间 namespaced: true, actions: { ...... }, mutations: { ...... }, state: { ...... }, getters: { ...... }, }person.jsimport axios from "axios"; import {nanoid} from "nanoid"; export default { namespaced: true, actions: { ...... }, mutations: { ...... }, state: { ...... }, getters: { ...... }, }（3）开启命名空间后：组件读取state数据//方式一：直接读取 this.$store.state.personOptions.personList //方式二：借助map方法 ...mapState('personOptions', ['personList'])组件读取getters数据//方式一：直接读取 this.$store.getters['personOptions/firstPersonName'] //方式二：借助map方法 ...mapGetters('countOptions', ['bigSum'])组件调用dispatch方法//方式一：直接调用 this.$store.dispatch('personOptions/addPerson', personObj) //方式二：借助map方法 //参数在模板中绑定事件时就传递 ...mapActions('countOptions',['incrementOdd','incrementWait'])组件调用commit方法//方式一：直接调用 this.$store.commit('personOptions/ADD_PERSON', personObj) //方式二：借助map方法 //参数在模板中绑定事件时就传递 ...mapMutations('countOptions',{increment:'INCREMENT',decrement:'DECREMENT'}),