vuex常用方法

以下是在脚手架搭建的项目中使用vuex。脚手架初始选择vuex后已经引入vuex并且全局注入。

官网中介绍的很清楚了，下面是本人的一点小结。用到的都是mapState这样的模式。

store.js中

export default new Vuex.Store({
    state: {
        myStateArr:[
            {
                id:1,
                age:24,
                name:'lin'
            },
            {
                id:2,
                age:25,
                name:'qi'
            }
        ],
        myStateNum:1
    },
    mutations: {
        //第一个就是store.state,第二个是外部传进来的参数（可选）
        increment (state,params) {
            state.myStateNum += params
        }
    },
    //context具有store相同的方法和属性,params传进来的参数
    //myAction({commit,state,getters},params)
    //actions可以使用异步分发mutations
    actions: {
        myAction(context,params){
            //可以将传进来的参数在传给mutations（可选）
            context.commit('increment',params)
        }
    },
    //personLen(state [,getters])
    getters:{
        myGetter(state){
            return  state.myStateNum;
        },
        myGetterTwo:(state) => (id) => {
            return state.myStateArr.filter(function (value) {
               if( value.id == id){
                   return value
               }
            })
        }
    }
})

界面中使用

state and getters

这两个都是获取状态的，使用方法差不多，getters可以根据传递的参数来获取

import {mapState,mapGetters} from 'vuex'
computed:{
    ...mapState({
        myStateArr: 'myStateArr'
    }),
    ...mapGetters({
        //将this.myGetter 映射为 this.$store.getters.myGetter
        myGetter:'myGetter',
        myGetterTwo:'myGetterTwo'
    })
}

mutations and actions

这两个都是方法，mutation只能用于同步，actions可用于异步

methods:{
    change(){
        this.increment(3)
    },
    changeTwo(){
        this.add(2)
    },
    ...mapMutations({
        //相当于this.$store.commit('increment')
        increment:'increment'
    }),
    ...mapActions({
        //将this.add()映射为this.$store.dispatch('myAction');
        add:'myAction'
    })
}

小结

1. 上面的increment:'increment'这种键值对相同的可以使用mapMutations(['increment'])这种方式。
2. state,getter都是状态，用计算属性获取值；mutations,actions里的都是方法，其它方法怎么用，这个也怎么用;
3. 增加state要用到vue.set(obj,kes,value);