Vue2学习-5（Vuex-2）

1.Vuex中getters属性类似于Vue中的computed属性

getters:{
        bigSum(state){
            return state.sum*10
        }
    }

2.Vuex模块化

        将不同类型的数据，对应的操作方法分别封装成一个对象，在Vuex中使用modules属性将封装好的对象放入

countAbout.js

export default {
    namespaced:true,
     actions:{
        add(context,value){
            context.commit('ADD',value)
        }
    },
     mutations:{
        ADD(context,value){
            context.sum += value
        }

    },
     state:{
        sum:0
    },
    getters:{
        bigSum(state){
            return state.sum*10
        }
    }
}

personAbout.js

import {v4 as uuidv4} from 'uuid'


export default {
    namespaced:true,
    actions:{
        addUser(context,value){
            if(value.indexOf('李') === 0){
                context.commit('ADDUSER',value)
            }else {
                alert("请添加姓李的名字")
            }
        }
    },
    mutations:{
        ADDUSER(context,value){
            const person = {
                id: uuidv4(),
                name: value
            }

            context.personList.unshift(person)
        }

    },
    state:{
        personList:[{id:uuidv4(),name:"李四"}]
    }
}

index.js

import Vuex from 'vuex'
import Vue from "vue";
import countAbout from "@/store/countAbout";
import personAbout from "@/store/personAbout";
Vue.use(Vuex)



export default new Vuex.Store({
    modules:{
        countAbout,
        personAbout
    }
})

3.mapState、mapGetters、mapActions、mapMutations

        使用mapState、mapGetters、mapActions、mapMutations函数快速生成数据映射，方法映射。

        在conputed属性中使用mapState与mapGetters，使用mapState表示在computed中生成了一个名为sum的计算属性，计算属性返回的值为sum。使用mapGetters表示在computed中生成了一个名为bigsum的计算属性，计算属性返回的值为countAbout中getters里定义的bigSum方法的返回值。

computed:{
    ...mapState('countAbout',{sum:'sum'}),
    ...mapGetters('countAbout',{bigSum:"bigSum"})
  },

        在methods中使用mapActions与mapMutations，使用mapActions表示在methods方法中生成一个名为addOne的函数，函数中直接执行，mapmutations同理。

this.$store.dispatch('countAbout/add',val)

this.$store.commit('countAbout/ADDTWO',val)

methods:{
    ...mapActions('countAbout',{addOne:"add"}),
    ...mapMutations('countAbout',{addTwo:"ADDTWO"})
  },