(1)概念:专门在Vue中实现集中式状态(也叫:数据、状态数据,之后统称:状态)管理的VUe插件,对vue应用中多个组件共享状态进行集中式的管理(读/写),也是一种组件通信的方式,适用于任何组件。
(2)地址:GitHub - vuejs/vuex: ️ Centralized State Management for Vue.js.
当某个属性,所有组件都需要使用:
(1)当多个组件依赖同一个状态。
(2)来自不同组件的行为要变更同一个状态。
(1)创建 文件夹:src/store/index.js
//该文件用于vuex中最为核心的store //引入Vue import Vue from 'vue' //引入vuex import Vuex from 'vuex' //准备actions 用于响应组件里的动作 const actions = { } //准备mutations 用于真正操作state中的数据 const mutations = { } //准备state 用于存储数据 const state = { } Vue.use(Vuex) //创建并暴露store export default new Vuex.Store({ actions, mutations, state, })
(2)在main.js中创建vm时传入store:
import store from './store' const vm=new Vue({ el:"#app", render:h=>h(App), store, beforeCreate(){ Vue.prototype.$bus=this } })
(3)注意:必须在index.js中引入Vue并使用插件vuex,否则new Vuex.Store()会报错。
(1)初始化数据(state),配置actions,配置mutations,操作文件store.js。
//该文件用于vuex中最为核心的store //引入Vue import Vue from 'vue' //引入vuex import Vuex from 'vuex' //准备actions 用于响应组件里的动作 const actions = { /* add(context,value){ // console.log("store.actions.add,context=",context,"value=",value) context.commit("ADD",value) }, sub(context,value){ context.commit("SUB",value) }, */isOdd(context, value) { console.log("store.actions.isOdd",value) context.dispatch("demo1", value) }, demo1(context, value) { console.log("store.actions.demo1",value) context.dispatch("demo2", value) }, demo2(context, value) { console.log("store.actions.demo2") if (context.state.sum % 2 != 0) { console.log("store.actions.isOdd") context.commit("ADD", value) } }, sleepAdd(context, value) { console.log("store.actions.sleepAdd") setTimeout(() => { context.commit("ADD", value) }, 1000); } } //准备mutations 用于真正操作state中的数据 const mutations = { ADD(state, value) { // console.log("store.mutations.ADD,state=",state,"value=",value) console.log("store.mutations.ADD") state.sum += value }, SUB(state, value) { console.log("store.mutations.state") // console.log("store.mutations.ADD,state=",state,"value=",value) state.sum -= value } } //准备state 用于存储数据 const state = { sum: 0, } Vue.use(Vuex) //创建并暴露store export default new Vuex.Store({ actions, mutations, state, })
(2)组件读取vuex中的数据:$taore.state.sum
(3)修改vuex中的数据:$store.dispatch('action中的方法名',参数)或者$store.commit('mutations中的方法名',参数)。
当前求和为:{{ $store.state.sum }}
备注:若没有网络请求或者其他业务逻辑,组件们可以越过actions直接访问mutations中的方法,既直接写commit()。
(1)概念:当state中的数据需要加工后在使用时,可以使用getters参数。
(2)配置getters属性:
//将state中的数据进行加工 const getters={ bigSum(state){ return state.sum*10 } } //创建并暴露store export default new Vuex.Store({ actions, mutations, state, getters })
(3)组件中读取数据:$store.getters.bigSum。
用于帮助我们映射state中的数据为计算属性:
computed:{ //借助mapState生成计算属性,从state中读取数据(对象写法) // ...mapState({school:'school',subject:'subject',sum:'sum'}) // 数组写法 ...mapState(['school','subject','sum']), }
用于帮助我们映射getters中的数据为计算属性
computed:{ //借助mapState生成计算属性,从state中读取数据(对象写法) // ...mapGetters({bigSum:'bigSum'}) // 数组写法 ...mapGetters(['bigSum']), }
用于帮助我们生成与actions对话的方法,既:包含$store.dispatch(xxx)的函数。
//对象式 // ...mapActions({sleepAdd:'sleepAdd',isOdd:'isOdd'}) //数组式 ...mapActions(['sleepAdd','isOdd'])
用于帮助我们生成与mutations对话的方法,既:包含$store.commit(xxx)的函数。
//对象式 // ...mapMutations({add:'ADD',sub:'SUB'}), //数组式 ...mapMutations(['ADD','SUB']),
mapActions与mapMutations使用时,若需要参数,应在模板绑定事件时传递参数,否则参数是事件对象。
(1)目的:让代码更好维护,多种数据分类更加明确。
(2)修改store.js,拆分为两个:person.js,count.js
person.js
//人员功能相关的 export default { namespaced:true, actions: { addPerson(context, value) { console.log("store.actions.addPerson") if (value != "") { context.commit("ADDPERSON", value) } else { alert("请输入姓名") } } }, mutations: { ADDPERSON(state, value) { state.personList.push(value) } }, state: { personList: ['张三'] }, getters: {} }
conut.js
//求和功能相关的 export default { namespaced:true, actions: { isOdd(context, value) { console.log("store.actions.isOdd", value) if (context.state.sum % 2 != 0) { console.log("store.actions.isOdd") context.commit("ADD", value) } }, sleepAdd(context, value) { console.log("store.actions.sleepAdd") setTimeout(() => { context.commit("ADD", value) }, 1000); }, }, mutations: { ADD(state, value) { // console.log("store.mutations.ADD,state=",state,"value=",value) console.log("store.mutations.ADD") state.sum += value }, SUB(state, value) { console.log("store.mutations.state") // console.log("store.mutations.ADD,state=",state,"value=",value) state.sum -= value }, }, state: { sum: 0, }, getters: { bigSum(state) { return state.sum * 10 } } }
index.js
//该文件用于vuex中最为核心的store //引入Vue import Vue from 'vue' //引入vuex import Vuex from 'vuex' import sumOptions from './count' import personOptions from './person' Vue.use(Vuex) //创建并暴露store export default new Vuex.Store({ modules:{ coundAbout:sumOptions, personAbout:personOptions, } })
(3)namespaced:true开启命名空间。
(4)开启命名空间后组件,读取state中的数据:
//方式1 直接读取 this.$store.state.personAbout.personList //方式2 借助mapState读取 ...mapState('countAbout',[sum])
(4)开启命名空间后,组件读取getters中的数据:
//方式1 直接读取 this.$store.getters['personAbout/firstName'] //方式2 借助mapGetters读取 ...mapState('countAbout',['bigSum'])
(5)开启命名空间后,组件调用dispatch:
//方式1 直接调用dispatch this.$store.dispatch('personAbout/addPerson',{name:'王'}) //方式2 借助mapActions读取 ...mapActions('countAbout',['isOdd','sleepAdd'])
(6)开启命名空间后,组件调用commit:
//方式1 直接调用commit this.$store.commit('personAbout/ADD_PERSON',{name:'王'}) //方式2 借助mapMutations读取 ...mapMutations('countAbout',['ADD','SUB'])