Vuex(多组件数据共享的Vue插件)搭建与使用_vue.js_

//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) ​ //准备actions对象-响应组件中用户的行为 const actions = {} //准备mutations对象-修改state中的状态（数据） const mutations = {} //准备state对象-保存具体数据 const state = {} ​ //创建并暴露store export default new Vuex.Store({ actions, mutations, state })

... import store from './store/index.js' ... ​ // new Vue({ el:'#app', render:h => h(App), store })

//引入Vue核心库 import Vue from 'vue' //引入Vuex import Vuex from 'vuex' //应用Vuex插件 Vue.use(Vuex) ​ //准备actions对象-响应组件中用户的行为 const actions = { //响应组件中jia的动作 jia(context,value){ context.commit('JIA',value) } } //准备mutations对象-修改state中的状态（数据） const mutations = { //执行JIA JIA(state,value){ state.sum+=value } } //准备state对象-保存具体数据 const state = { sum:0 } ​ //创建并暴露store export default new Vuex.Store({ actions, mutations, state })

... const getters = { bigSum(state){ return state.sum*10 } } ​ //创建并暴露store export default new Vuex.Store({ ... getters })

computed:{ //借助mapState生成计算属性：sum、school、subject（对象写法） ...mapState({sum:'sum',school:'school',subject:'subject'}), //借助mapState生成计算属性：sum、school、subject（数组写法） ...mapState(['sum','school','subject']), }

computed:{ //借助mapGetters生成计算属性：bigSum（对象写法） ...mapState({bigSum:'bigSum'}), //借助mapGetters生成计算属性：bigSum（数组写法） ...mapState(['bigSum']), }

methods:{ //靠mapActions生成：incrementOdd、incrementWait（对象写法） ...mapState({incrementOdd:'jiaOdd',incrementWait:'jiaWait'}), //靠mapActions生成：incrementOdd、incrementWait（数组写法） ...mapState(['incrementOdd':'jiaOdd','incrementWait':'jiaWait']), }

methods:{ //靠mapMutations生成：increment、decrement（对象写法） ...mapState({increment:'jia',decrement:'jian'}), //靠mapMutations生成：increment、decrement（数组写法） ...mapState(['increment':'jia','decrement':'jian']), }

const countAbout = { namespaced:true,//开启命名空间 state:{...}, actions:{ jiaOdd(context,数据){...} }, mutations:{ jia(state,数据){...} }, getters{ bigSum(state){...} } } ​ const personAbout = { namespaced:true,//开启命名空间 state:{ list:[...] }, actions:{...}, mutations:{...}, getters{...} } const store = new Vuex.Store({ modules:{ countAbout, personAbout } })

//方式一：自己读取 this.$store.state.personAbout.list //方式二：借助mapState读取 ...mapState('personAbout',['list'])

//方式一：自己读取 this.$store.getters['countAbout/bigSum'] //方式二：借助mapGetters读取 ...mapGetters('countAbout',['bigSum'])

//方式一：自己直接dispatch this.$store.dispatch('countAbout/jiaOdd',数据) //方式二：借助mapActions读取 ...mapActions('countAbout',['incrementOdd':'jiaOdd'])

//方式一：自己直接commit this.$store.commit('countAbout/jia',数据) //方式二：借助mapMutations读取 ...mapMutations('countAbout',['increment':'jia'])