Question

我有两个模块，如下所示：

final_list = {
  "1": [
    { "host": "1", "a": "a", "b": "b" },
    { "host": "1", "a": "w", "b": "e" },
    { "host": "1", "a": "r", "b": "t" }
  ],
  "2": [
    { "host": "2", "a": "c", "d": "d" },
    { "host": "2", "a": "q", "d": "s" },
    { "host": "2", "a": "f", "d": "b" }
  ],
  "3": [
    { "host": "3", "a": "d", "d": "d" },
    { "host": "3", "a": "q", "d": "c" },
    { "host": "3", "a": "k", "d": "p" }
  ]
}

const surfers = {
  namespaced: true,
}

const surfGroups = {
  namespaced: true,
  state: {
     fetchingSurfersLoading: true,
  }
}

两个命名空间模块具有状态等，为简洁起见，我省略了它们。

我正在将状态从命名空间存储映射到组件，如下所示：

export default new Vuex.Store({
  modules: {
    surfers: surfers,
    surfGroups: surfGroups
  }
});

但是，不幸的是，状态没有映射，因为我有一个不会触发的组件：

...mapState({
   fetchingSurfersLoading: state => state.surfers.fetchingSurfersLoading,
   fetchingSurfersSuccess: state => state.surfers.fetchingSurfersSuccess,
   fetchingSurfSessionsLoading: state => state.surfGroups.fetchingSurfSessionsLoading,
   fetchingSurfSessionsSuccess: state => state.surfGroups.fetchingSurfSessionsSuccess,
   creatingSurfGroupLoading: state => state.surfGroups.creatingSurfGroupLoading,
   creatingSurfGroupSuccess: state => state.surfGroups.creatingSurfGroupSuccess,
}),

此外，观察各种参数不会触发任何潜在的变化：

<Loader v-if="creatingSurfGroupLoading || fetchingSurfSessionsLoading" />

A，控制台中什么也没记录，

如果我对映射状态使用了多个扩展运算符：

  watch: {
    fetchingSurfSessionsLoading() {
      console.log(this.fetchingSurfSessionsLoading);
    },
  },

在模板中访问fetchingSurfersSuccess：

    ...mapState('surfGroups/', [
      'fetchingSurfSessionsLoading',
      'fetchingSurfSessionsSuccess',
      'creatingSurfGroupLoading',
      'creatingSurfGroupSuccess',
    ]),
    ...mapState('surfers/', [
      'fetchingSurfersLoading',
      'fetchingSurfersSuccess',
    ]),

不起作用，无论如何。观察和记录测试相同，没有任何更改/更新。在我使用单独的模块为商店命名空间之前，一切都很好。

奇怪的是，我的动作是否已针对每个不同的命名空间进行映射...并且它们正在起作用？

Vuex模块命名空间参考-如何正确映射状态

0 个答案: