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

最新推荐文章于 2024-05-06 10:34:03 发布

努力向前的韭菜

最新推荐文章于 2024-05-06 10:34:03 发布

阅读量473

点赞数 1

分类专栏： vue 文章标签：前端 javascript html

本文链接：https://blog.csdn.net/it_bird1999/article/details/136740061

版权

vue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

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

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

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)
	}
}