Vuejs2 如何访问Vuex模块

我阅读了thorugh的文档，但没有找到任何关于当您有多个模块时如何实际访问存储中特定模块的内容

这是我的商店：

export default new Vuex.Store({
  modules: {
    listingModule: listingModule,
    openListingsOnDashModule: listingsOnDashModule,
    closedListingsOnDashModule: listingsOnDashModule
  }
})

每个模块都有自己的状态、突变和getter

可以通过以下方式成功访问状态：

this.$store.state.listingModule // <-- access listingModule

或

我得到此.store.listingModule或此.store.translations未定义错误

您知道如何访问模块getter和transformation吗

编辑

正如Jacob所指出的，突变可以通过其唯一的标识符访问。所以，随它去吧，我重新命名了变异，现在可以进入了

以下是我的看法：

mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      state.listings = payload
    },
 }

这是我的状态

state: {
    listings:[{
      id: 0,
      location: {},
      ...
    }]
}

当我使用数组的有效负载进行提交时，状态只保存一个元素。 给出有效载荷数组4，它返回数组1

我错过了什么

---

谢谢

IMHO，调用vuex操作而不是调用突变是个好主意。操作可以很容易地访问，而不必担心您正在使用哪个模块，特别是当您有任何异步操作发生时，它非常有用。

也就是说，正如Jacob已经指出的，突变名称是唯一的，这就是为什么许多vuex模板/示例都有一个名为mutation-types.js的单独文件来帮助组织所有突变

re。在编辑过程中，我们不太清楚问题是什么，我建议您将其拆分为一个单独的问题，并包含更多代码，或者更新问题标题

虽然我不知道为什么它不起作用，但我建议您尝试使用它，因为它可以解决两个常见问题

import Vue from 'vue'
//...
mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      Vue.$set(state, 'listings', [...payload]);
    },
 }

未触发反应性。使用

Vue.$set（）

会强制某些变量启动，否则这些变量不会触发。这对于嵌套数据（如对象的对象）非常重要，因为vue不会为对象或数组中的每个数据点创建setter/getter，而只是为顶层创建setter/getter

rest解构。数组：

[…myArray]

对象：

{…myObj}

。通过将数组/对象的内容指定为新数组/对象，可以防止数据被另一个进程更改。请注意，尽管这只是一个层次的深度，但深度嵌套的数据仍然会看到这个问题

---

IMHO，调用vuex操作而不是调用突变是个好主意。操作可以很容易地访问，而不必担心您正在使用哪个模块，特别是当您有任何异步操作发生时，它非常有用。

也就是说，正如Jacob已经指出的，突变名称是唯一的，这就是为什么许多vuex模板/示例都有一个名为mutation-types.js的单独文件来帮助组织所有突变

re。在编辑过程中，我们不太清楚问题是什么，我建议您将其拆分为一个单独的问题，并包含更多代码，或者更新问题标题

虽然我不知道为什么它不起作用，但我建议您尝试使用它，因为它可以解决两个常见问题

import Vue from 'vue'
//...
mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      Vue.$set(state, 'listings', [...payload]);
    },
 }

未触发反应性。使用

Vue.$set（）

会强制某些变量启动，否则这些变量不会触发。这对于嵌套数据（如对象的对象）非常重要，因为vue不会为对象或数组中的每个数据点创建setter/getter，而只是为顶层创建setter/getter

rest解构。数组：

[…myArray]

对象：

{…myObj}

。通过将数组/对象的内容指定为新数组/对象，可以防止数据被另一个进程更改。请注意，尽管这只是一个层次的深度，但深度嵌套的数据仍然会看到这个问题

---

this.$store.commit（'REPLACE_LISTINGS'，res）

。无论模块是什么，突变名称都必须是唯一的。除非您使用名称空间，否则这个命令为什么不保存任何数组？我输入一个4的数组，然后返回一个1的数组。是否有一个自然的限制或只是我的代码？可能是变异代码有问题谢谢@JacobGoh，请参见编辑。我不明白我遗漏了什么。代码似乎很好。您还可以显示从何处获取数据以提交变异的代码吗？

this.$store.commit（'REPLACE_LISTINGS'，res）

。无论模块是什么，突变名称都必须是唯一的。除非您使用名称空间，否则这个命令为什么不保存任何数组？我输入一个4的数组，然后返回一个1的数组。是否有一个自然的限制或只是我的代码？可能是变异代码有问题谢谢@JacobGoh，请参见编辑。我不明白我遗漏了什么。代码似乎很好。你能不能也展示一下你从哪里获得数据来进行变异的代码？谢谢Daniel的洞察力。雅各布回答了最初的问题，我想解决这个问题，并把这个作为答案。至于数组不工作的原因，我发现在代码中的其他地方每次更新后状态都会被替换，因此返回了1的数组。这就是为什么使用

[…payload]

是个好主意，因为它可以防止数组在变异之外更改感谢Daniel的洞察力。雅各布回答了最初的问题，我想解决这个问题，并把这个作为答案。至于数组不工作的原因，我发现在我的代码中的其他地方每次更新后状态都被替换，因此返回了1的数组。这就是为什么使用

[…payload]

是一个好主意，因为它可以防止数组在突变之外发生变化

import Vue from 'vue'
//...
mutations: {
    REPLACE_OPEN_DASH_LISTINGS(state, payload){
      Vue.$set(state, 'listings', [...payload]);
    },
 }