首页 / vue  

vuex2.x中mutation 和 action的基本使用

1, mutation
  The only way to actually change state in a Vuex store is by committing a mutation, 在vue 中,只有mutation 才能改变state.  mutation 类似事件,每一个mutation都有一个类型和一个处理函数,因为只有mutation 才能改变state, 所以处理函数自动会获得一个默认参数 state. 所谓的类型其实就是名字,action去comit 一个mutation, 它要指定去commit哪个mutation, 所以mutation至少需要一个名字,commit mutation 之后, 要做什么事情,那就需要给它指定一个处理函数, 类型(名字) + 处理函数就构成了mutation. (Vue 建议我们mutation 类型用大写常量表示,修改一下,把mutation 类型改为大写)

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

现在store.js里添加mutation、action

const store = new Vuex.Store({
    state: {
        count:0
    },
    mutations: {
        // 加1
        INCREMENT(state) {
            state.count++;
        },
        // 减1
        DECREMENT(state) {
            state.count--
        }
    },
    actions: {
        increment({commit}) {
            commit("INCREMENT")
        },
        decrement({commit}) {
            commit("DECREMENT")
        },
        incrementWithValue({commit}, value){
            commit("INCREMENT_WITH_VALUE",  parseInt(value))
        }
    }
})

3, dispatch  action

  现在就剩下dispatch action 了。什么时候dispatch action 呢? 只有当我们点击按钮的时候. 给按钮添加click 事件,在click 事件处理函数的中dispatch action. 打开increment.vue 组件,给两个按钮添加click 事件。

<template>
    <div>
        <button @click="increment">+1</button>
        <button @click="decrement">-1</button>
    </div>
</template>
<script>
    export default {
        methods: {
            increment(){
                this.$store.dispatch("increment");
            },
            decrement() {
                this.$store.dispatch("decrement")
            }
        }
    }
</script>

其实像上面dispatch action 比较麻烦,如果有10 个按钮,我们要写10 个函数,vue 提供了mapAction 函数,它和mapState  是一样的,把我们的 action 直接映射到store 里面的action中。
<script>
    import {mapActions} from "vuex";
    export default {
        methods: {
            ...mapActions(["increment", "decrement"]),
            incrementWithValue() {  // 调用带参数的action方法
                this.$store.dispatch("incrementWithValue", this.incrementValue)
            }
        }
    }
</script>
2019-11-09