vuex与map映射实现方法梳理分析

//创建store文件夹下的index.js，在main.js中引用，并在new Vue({})加入
//index.js文件中
//store下的index.js
//该文件用于创建Vuex中最重要的Store
import Vue from 'vue'
//引入Vuex
import Vuex from 'vuex'
-----------------------
 Vue.use(Vuex)
    //创建store 
    const store = new Vuex.Store({
        actions,
        mutations,
        state,
        getters(放入store中操作的属性)
    })
    //暴露/导出store
  export default store

//组件中
$store.state.sum

 methods:{
            increment(){
                //没有任何操作逻辑，可以直接通过commit和mutations对话
                // this.$store.dispatch('jia',this.n)\
                this.$store.commit('JIA',this.n)
            },
             decrement(){
                // this.$store.dispatch('jian',this.n)
                 this.$store.commit('JIAN',this.n)
             },
             incrementOdd(){
               this.$store.dispatch('jiaOdd',this.n)
             },
             incrementWait(){
               this.$store.dispatch('jiaWait',this.n)
             }
   }

//准备actions----用于响应组件中的动作
const actions ={
    //context为上下文 里面含有state等很多
    // jia(context,value){
    //     console.log('actions中的jia被调用了',value);
    //     context.commit('JIA',value)
    // },
    // jian(context,value){
    //     context.commit('JIAN',value)
    // },
    jiaOdd(context,value){
        if(context.state.sum %2){
            context.commit('JIA',value)
        }
    },
    jiaWait(context,value){
        setTimeout(()=>{
            context.commit('JIA',value)
        },500)
    }
}
//准备mutations---用于操作数据(state)
    const mutations = {
        JIA(state,value){
            console.log('mutations被调用了',state,value);
            state.sum += value
        },
        JIAN(state,value){
            state.sum -= value
        }
    }
    //准备state ---- 用于存储数据
    const state ={
        sum:0
    }

---------
//准备getters----用于将state中的数据进行加工
const getters ={
    bigSum(state){
        return state.sum*10
    }
}
//创建store 
const store = new Vuex.Store({
    actions,
    mutations,
    state,
    getters
})
//暴露,导出store
export default store

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

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

methods:{
    //靠mapActions生成 incrementOdd,incrementWait(对象形式)
    ...mapActions({incrementOdd:'jiaOdd',incrementWait:'jiaWait'})
     //靠mapActions生成 incrementOdd,incrementWait(数组形式)
    ...mapActions(['jiaOdd','jiaWait'])
}

methods:{
    //靠mapMutations生成 incrementOdd,decrement(对象形式)
    ...mapMutations({increment:'JIA',decrement:'JIAN'})
     //靠mapMutations生成 JIA,JIAN(数组形式)
    ...mapMutations(['JIA','JIAN'])
}