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

//引入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'])