Question

我从vue阅读了他的文档，但是当你有多个模块时，我没有找到任何关于如何实际访问商店中特定模块的信息。

这是我的商店：

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

每个模块都有自己的状态，突变和吸气剂。

状态可以通过

成功访问

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

当我这样做时，访问突变的情况也是如此

this.$store.listingModule.commit('REPLACE_LISTINGS', res)

或

this.$store.mutations.listingModule.commit('REPLACE_LISTINGS', res)

我得到了这个。$ store.listingModule或者。$ store.mutations undefined error。

你知道如何访问模块getter和mutgens吗？

修改

正如Jacob所说，突变可以通过其唯一标识符访问。就这样吧，我重新命名了变异，现在可以访问了。

这是我的突变：

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

这是我的州

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

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

我错过了什么？

谢谢！

Answer 1

恕我直言，调用vuex动作而不是调用突变是个好主意。可以轻松访问操作，而无需担心您正在使用哪个模块，并且在您进行任何异步操作时尤其有用。 https://vuex.vuejs.org/en/actions.html

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

重。编辑，问题不是很清楚，我鼓励你把它分成一个单独的问题，包括更多的代码，或者更新问题标题。

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

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

未触发反应。使用Vue.$set()强制反应性来启动一些不会触发的变量。这对于嵌套数据（如对象的对象）很重要，因为vue不会为对象或数组中的每个数据点创建一个setter / getter，只是顶层。
休息解构。数组：[...myArray]对象：{...myObj}。这可以通过将数组/对象的内容指定为新的数组/对象来防止数据被另一个进程更改。请注意，这只是一个深度，因此深度嵌套的数据仍会看到该问题。

如何访问Vuex模块的突变

1 个答案: