vuex：状态字段“ foo”被名称为“ foo”的模块覆盖

Question

我在控制台中收到此警告：

[vuex] state field "foo" was overridden by a module with the same name at "foo"

这是什么意思，我做错了什么？

Answer 1

这是Vuex 3.1.2中添加的新警告。

https://github.com/vuejs/vuex/releases/tag/v3.1.2

当state中的属性名称与模块名称冲突时，将记录该日志，如下所示：

new Vuex.Store({
  state: {
    foo: 'bar'
  },
  modules: {
    foo: {}
  }
})

如果您尝试访问state.foo，则可能期望该值为'bar'，但实际上它将引用state模块的foo。

您可以通过从state对象中删除属性或重命名该属性或模块来解决此问题。

记录相关警告并显示state.foo的结果值的小示例：

const store = new Vuex.Store({
  state: {
    foo: 'bar'
  },
  modules: {
    foo: { state: { flag: 2 } }
  }
})

console.log(store.state.foo)

<script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.1.2/dist/vuex.js"></script>