vuex 的模块中如何调用 mutations 中的方法

最新推荐文章于 2023-09-13 10:29:05 发布

瞎转悠达

最新推荐文章于 2023-09-13 10:29:05 发布

阅读量307

点赞数

文章标签：前端 javascript vue.js node.js 开发语言

本文链接：https://blog.csdn.net/qq_35859392/article/details/128610155

版权

本文详细介绍了在Vuex模块中如何调用mutations中的方法，包括不使用和使用辅助函数mapMutations的两种情况。通过示例代码展示了如何在组件的方法中直接调用以及通过mapMutations映射调用mutation，实现状态的更新。

摘要由CSDN通过智能技术生成

vuex 的模块中如何调用 mutations 中的方法

　　　模块vuexTest.js

/**
 * 模块 vuexTest.js
 */
 export default {
    namespaced: true,
    state: {
        stateHello: 1,
    },
    mutations: {
        mutationsHello(state, val) { // 只用两个参数 一个时state ,另一个是可以 字符串、对象、数组等
            console.log("1111");
            console.log("val", val);
            state.stateHello += val
        }
    },
    actions: {

    }
}

　　1、不使用辅助函数 mapMutations 情况下

methods: {
    changeVal() {
      this.$store.commit("vuexTest/mutationsHello", 2)
    }
  }

　　2、使用辅助函数 mapMutations 情况下

  methods: {
    ...mapMutations("vuexTest", ['mutationsHello']),
    ...mapMutations("vuexTest", {
      mutationsHello: "mutationsHello"
    }),
    ...mapMutations("vuexTest", {
      changeState: "mutationsHello"
    }),
    change() {
      this.mutationsHello(2);
      this.changeState(2);
    }
  },