Vuex的使用方法第二篇之mutation和action及getter的基本使用

mutations

在vue 中，只有mutation 才能改变state.  mutation 类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字，

先看上一篇文章的例子：

在没有用vuex的时候，我们可以实现点击颜色切换

用了vuex后，只实现了颜色变换一次的功能，那我们可不可以变换很多次呢？

mutations 登场 , 问题迎刃而解 :

store.js:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    show:false
}
export default new Vuex.Store({
    state,
    mutations:{
        switch_color(state){
            state.show = state.show?false:true
        }
    }
})

父组件： 

使用$store.commit('switch_color') 来触发 mutations 中的 switch_color 方法。

再举个例子

1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件

const state = { count:1 }

2、用export default 封装代码，让外部可以引用

export default new Vuex.Store({

    state

  });

store.js:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    count:1
}
export default new Vuex.Store({
    state,
    mutations:{
        add(state){
            state.count += 1;
        },
        reduce(state){
            state.count -= 1;
        }
    }
})

新建一个vue的模板，位置在components文件夹下，名字叫page.vue。在模板中我们引入我们刚建的store.js文件，并在模板中用{{$store.state.count}}输出count 的值。

这样进行预览就可以实现对vuex中的count进行加减了。

注意：mutations里的操作必须是同步的

      你一定好奇 , 如果在 mutations 里执行异步操作会发生什么事情 , 实际上并不会发生什么奇怪的事情 , 只是官方推荐 , 不要                 在 mutationss 里执行异步操作而已。

actions

action去commit mutations, 所以还要定义action. store.js 里面添加actions.

store.js:

import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const state = {
    show:false,
    count:1
}
export default new Vuex.Store({
    state,
    mutations:{
        switch_color(state){
            state.show = state.show?false:true
        },
        add(state){
            state.count += 1;
        },
        reduce(state){
            state.count -= 1;
         }
     },
     actions:{
         addPlus(context){
             context.commit('add')
         },
         reducePlus(context){
             context.commit('reduce');
         }
     }
})

action 和mutions 的定义方法是类似的，我们要dispatch 一个action, 所以actions 肯定有一个名字，dispatch action 之后它要做事情，就是commit mutation, 所以还要给它指定一个函数。因为要commit mutation ,所以 函数也会自动获得一个默认参数context,  它是一个store 实例，通过它可以获取到store 实例的属性和方法,如 context.state 就会获取到 state 属性， context.commit 就会执行commit命令。

　　其实actions 还可以简写一下， 因为函数的参数是一个对象，函数中用的是对象中一个方法，我们可以通过对象的解构赋值直接获取到该方法。修改一下 actions

    actions:{
         addPlus({commit}){
            commit('add')
         },
         reducePlus({commit}){
            commit('reduce');
         }
     }
})

当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action.

打开page.vue 组件，给两个按钮添加click 事件。

• context：上下文对象，这里你可以理解称store本身。
• {commit}：直接把commit对象传递过来，可以让方法体逻辑和代码更清晰明了。

官方推荐 , 将异步操作放在 action 中。

getter

有的组件中获取到 store 中的state,  需要对进行加工才能使用，computed 属性中就需要写操作函数，如果有多个组件中都需要进行这个操作，那么在各个组件中都写相同的函数，那就非常麻烦，这时可以把这个相同的操作写到store 中的getters,  每个组件只要引用getter 就可以了，非常方便。Getter 就是把组件中共有的对state 的操作进行了提取，它就相当于 对state 的computed. 所以它会获得state 作为第一个参数。

 store.js:

export default new Vuex.Store({
    state,
    getters:{
        count:function(state){
           return state.count += 100;
        }
    },
    mutations:{
        switch_color(state){
            state.show = state.show?false:true
        },
        add(state){
            state.count += 1;
        },
        reduce(state){
            state.count -= 1;
         }
     },
     actions:{
         addPlus({commit}){
            commit('add')
         },
         reducePlus({commit}){
            commit('reduce');
         }
     }
})

我们在组件中使用 $store.state.count 来获得状态 count , 类似的 , 我们可以使用 $store.getters.count 来获得状态 count 。

page.vue:

注意 : $store.getters.count 的值是不能直接修改的 , 需要对应的 state 发生变化才能修改。

未完，待续。。。。