Vuex的使用（七）——mapMutations的用法

ゝ一世哀愁。 2022-09-10 13:21 184阅读 0赞

参考文档：https://vuex.vuejs.org/zh/guide/

mapMutations的定义可以对标mapState和mapGetters参考理解，这里就不赘述了，下面直接上用法示例代码。首先在Vuex中补充mutations的其他用法（mutation2方法，修改文件路径为src\\store\\index.js），代码如下：

import Vue from "vue";
    import Vuex from "vuex";
    
    Vue.use(Vuex);
    
    const store = new Vuex.Store({ 
        state: { 
            param1: "state param"
        },
        getters: { 
            param2: state => { 
                return `new ${ state.param1}`;
            },
            // 在getters中可以使用其他getters
            param3: (state, getters) => { 
                return `another ${ getters.param2}`;
            },
            // getter支持返回一个函数
            param4: state => index => { 
                return state.paramArray[index];
            }
        },
        // mutations必须是同步函数（即函数内不能有异步行为）且不支持相互调用（如下面的mutation1不能调用mutation2）
        mutations: { 
            mutation1: state => { 
                // 在mutations的回调函数内可以修改state的值
                state.param1 += " add something";
            },
            // mutations支持传递参数（第二个参数）
            mutation2: (state, addString) => { 
                state.param1 += addString;
            }
        }
    });
    
    export default store;

在组件中通过mapMutations引入新增的mutations并在页面上提供调用入口（修改文件路径为src\\components\\componentF.vue），代码如下：

<template>
        <div>
            <span>mutations用法</span>
            <br />
            <span>state in vuex：{
       {param1}}</span>
            
            <br />
            <button @click="mutation1">mapMutations</button>
            <br />
            <button @click="mutation2(' add somebody')">mapMutations</button>
        </div>
    </template>
    
    <script> // 引入mapMutations import { mapState, mapMutations } from "vuex"; export default { name: "component-f", computed: { ...mapState(["param1"]) }, methods: { /** * 通过mapMutations引入mutation1和mutation2相当于在methods中定义了名称为mutation1和mutation2 * 的2个方法，所以就不能在methods中重复定义名称为mutation1和mutation的方法了 */ ...mapMutations(["mutation1", "mutation2"]), commitMutation1() { // 通过this.$store.commit("mutations方法名")的方式调用mutations this.$store.commit("mutation1"); // 上下两种调用方式是等价的，但显然下面的写法简洁多了 // this.mutation1(); } } }; </script>
    
    <style scoped> </style>

运行后点击第一个mapMutations按钮可以看到修改state效果和commitMutation1方法是相同的，点击第二个mapMutations按钮则可以看到可以通过第二个自定义参数给state赋值（当然也可以用于逻辑处理）。