Vuex - 从组件获取模块属性答案

【问题标题】：Vuex - get module property from componentVuex - 从组件获取模块属性
【发布时间】：2020-03-12 14:27:06
【问题描述】：

在我添加一个模块之前，我有一个带有数据属性的 Vuex 存储，baseUrl，我可以从如下组件访问它：

this.$store.state.baseUrl

现在我已经向 Vuex 商店添加了一个模块，并将 baseUrl 属性移到了模块中：

export const module1 = {

    state: {
        baseUrl: '',
    }
}

模块包含在 Vuex 中：

export default new Vuex.Store({

    modules: {  module1  },

但现在this.$store.state.baseUrl 变得未定义。我以为模块属性会合并到 Vuex 存储中，所以我可以使用完全相同的代码访问属性。

如何访问模块属性？如果我不得不说 this.$store.state.module1.baseUrl ，当我将属性从 Vuex 移动到模块中时，我必须在各处更新所有代码。当将属性从一个模块移动到另一个模块时，我必须在各处更新代码以更改模块名称。

但是，即使this.$store.state.module1.baseUrl 也不起作用。我得到了Cannot read property 'state' of undefined。

编辑：更正！我写了this.$store.module1.state.baseUrl，所以当我更改为this.$store.state.module1.baseUrl 时，它确实有效。

那么这是访问模块属性的正确方法吗 - 我必须指定模块名称？（并在模块内移动属性时遍历所有代码库）。

【问题讨论】：

【解决方案1】：

就像您在编辑中已经指出的那样，您必须使用this.$store.state.module1.baseUrl 来访问module 的状态。

但这不是唯一的方法，您还可以使用 mapState 从组件内访问状态：

YourComponent.vue
import { mapState } from 'vuex'  // outside of export default

computed: {
    ...mapState('module1', ['baseUrl'])
}

baseUrl 现在可通过this 访问。

【讨论】：

【解决方案2】：

使用getters 似乎是一个好方法——我在获取属性时不必指定模块名称。

如果我有：

export const module1 = {

    state: { 
        baseUrl: '',
    },
    getters: {  
        baseUrl: state => state.baseUrl
    }

我可以通过以下方式获取组件中的属性：this.$store.getters.baseUrl

因此，如果我愿意，我可以将 baseUrl 和 getter 移动到不同的模块中，代码仍然可以工作。

【讨论】：