vuex 的模块Module中如何调用 actions 中的方法

最新推荐文章于 2026-05-23 09:16:00 发布

原创最新推荐文章于 2026-05-23 09:16:00 发布 · 833 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#前端 #javascript #html

收录于

vue 专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在Vuex的模块中如何在两种场景下调用actions的方法：一是不使用辅助函数mapActions直接通过`this.$store.dispatch`；二是使用mapActions导入并简化action调用。

vuex 的模块Module中如何调用 actions 中的方法

模块globalOrgIdStore.js

const globalOrgIdStore = {
  namespaced: true,
  state: {
    globalOrgId: null,
    orgType: 1, // 判断是否为公司端 0-站点；1-公司
  },
  getters: {},
  mutations: {
    getGlobalOrgId(state, data) {
      state.globalOrgId = data
    },
    getOrgType(state, data) {
      state.orgType = data
    }
  },
  actions: {
    setGlobalOrgId(context) {
      context.commit('getGlobalOrgId')
    },
    setOrgType(context) {
      context.commit('getOrgType')
    }
  }
}
export default globalOrgIdStore

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

this.$store.dispatch('globalOrgIdStore/setOrgType', data.orgType)
this.$store.dispatch('globalOrgIdStore/setGlobalOrgId', data.orgId)

2、适用辅助函数 mapActions 情况下

import { mapActions } from 'vuex'
methods: {
	...mapActions('mapActions ',['setGlobalOrgId', 'setOrgType'])
	fun(){
		this.setOrgType(data.orgType)
	}
}