使用vuex-module-decorators时如何在组件中调用模块的Mutation

开发者阿泽

2026-9-24

你使用的是开启了命名空间的vuex装饰器模块，调用set mutation有以下三种常用方式：

方式1：直接通过$store.commit调用（最简单，无需额外导入）

在组件方法中直接使用vuex原生commit方法，注意要加命名空间前缀r2o/：

// 组件内方法示例
handleSetR2O() {
  const payload: IR2O[] = [] // 替换为实际要传入的IR2O类型数组
  this.$store.commit('r2o/set', payload)
}

方式2：使用mapMutations辅助函数（适合多次调用的场景）

先导入vuex的mapMutations方法，在组件的methods中注册对应mutation，调用时无需再写命名空间前缀：

import { mapMutations } from 'vuex'

export default {
  methods: {
    // 第一个参数为命名空间名，第二个数组为要引入的mutation名称
    ...mapMutations('r2o', ['set']),
    test() {
      const payload: IR2O[] = []
      // 直接调用注册好的方法即可
      this.set(payload)
    }
  }
}

如果是<script setup lang="ts">写法可以这么用：

import { useStore, mapMutations } from 'vuex'

const store = useStore()
const set = mapMutations('r2o', ['set']).set.bind(store)

// 调用
const payload: IR2O[] = []
set(payload)

方式3：使用getModule获取模块实例（TS类型友好，推荐TS项目使用）

这是vuex-module-decorators官方推荐的调用方式，可以获得完整的类型提示和校验：

首先确保你的store根文件（一般是store/index.ts）有导出store实例：

// store/index.ts 示例
import { createStore } from 'vuex'
export default createStore({
  // 你的根store配置、模块注册逻辑
})

在组件中导入模块并获取实例调用：

import { getModule } from 'vuex-module-decorators'
import R2O from '~/store/r2o'
import store from '~/store'

const r2oModule = getModule(R2O, store)

// 调用mutation，会自动校验参数类型，写错方法名也会有TS报错提示
const payload: IR2O[] = []
r2oModule.set(payload)