VueX mapGetters 获取 Modules 中的Getters

静已思之愈浓

已于 2022-12-01 09:31:36 修改

阅读量7k

点赞数 10

分类专栏： Vuex mapGetters Modules 文章标签： vue.js

于 2020-12-16 17:44:53 首次发布

本文链接：https://blog.csdn.net/weixin_43959963/article/details/111295725

版权

Vuex 同时被 3 个专栏收录

1 篇文章

订阅专栏

mapGetters

1 篇文章

订阅专栏

Modules

1 篇文章

订阅专栏

本文介绍了Vuex中如何使用mapGetters和mapActions进行模块化状态管理和方法调用，强调了createNamespacedHelpers在处理嵌套模块时的作用。通过实例展示了如何通过命名空间辅助函数来定位和操作特定模块的状态和方法，提醒开发者重视文档阅读，以避免常见错误。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

注明 : permission 是你要获取的Modules中的哪一个 (permission 即是模块名);

        ...mapGetters("permission",[
            'ReturnRoutes'
        ]),
		...mapGetters("模块名",[
            '方法名'
        ]),

非辅助函数映射获取方式 :

	this.$store.getters["permission/ReturnRoutes"]
	this.$store.getters["模块名/方法名"]

permission 实际上传入的是一个路径(一般在Modules嵌套的情况下)

computed: {
  ...mapState('some/nested/module', {
    a: state => state.a,
    b: state => state.b
  })
},
methods: {
  ...mapActions('some/nested/module', [
    'foo', // -> this.foo()
    'bar' // -> this.bar()
  ])
};

createNamespacedHelpers 命名空间辅助函数, 来进行规定辅助函数的路径

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

export default {
  computed: {
    // 在 `some/nested/module` 中查找
    ...mapState({
      a: state => state.a,
      b: state => state.b
    })
  },
  methods: {
    // 在 `some/nested/module` 中查找
    ...mapActions([
      'foo',
      'bar'
    ])
  }
}

各位码友多读文档, 如果您有幸看到这篇文章, 说明您是吃了少读文档的亏, 和我一样, 共勉~, 详情请看 Vuex文档