vuex常用法

stores.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一般有两以下两种用法，第一种只需要获取内容的，第二种是根据传进来的参数来获取内容的
    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);
 

modules

项目大的时候会用到，建不同的js，形如：

const login = {
    state:{
        name:'222'
    }
    //...
};

export default {
    login
}

然后在store.js中引入

import login from './zz'

export default new Vuex.Store({
   modules:{
       a:login.login
   }
})

modules中，只有state不在全局命名空间（简单说就是在同一个模块中的mutaions,getters,actions可以访问到）。getters,mutations,actions在全局命名空间，和不是模块的一样形式使用。还有rootState,rootGetters,

const moduleA = {
    state:{
        age:22
    },
    mutations:{
        //increment(state [,params] [,rootState] [,rootGetters])
        increment(state){
            state.age++
        }
    },
    getters:{
        //myGetter(state [,getters] [,rootState])
        myGetter(state){
            return state.age
        }
    },
    actions:{
        //ccontext.state context.rootState ...
        myAction({commit,state,rootState}){
            commit('increment')
        }
    }
};

使用如下：

methods:{
    changeOne(){
        this.increment()
    },
    changeTwo(){
        this.myAction();
    },
    ...mapMutations({
        increment:'increment'
    }),
    ...mapActions({
        myAction:'myAction'
    })
},
computed:{
    ...mapState({
        msg:state => state.a.age,
        msgTwo:state => state.b.age
    }),
    ...mapGetters({
        myGetter:'myGetter'
    })
}

上面触发了‘myGetter’，‘myAction’，在任意模块中有同名的都会触发，为了能够制定触发某个模块下的getters,mutations,actions,就要使用命名空间了；

const login = {
    namespace:true,
    state:{
        name:'222'
    }
    //...
};

export default {
    login
}

加了命名空间后，就要如下面这样使用了