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

Question

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

[vuex] 状态字段“foo”被“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.11/dist/vue.js"></script>
<script src="https://unpkg.com/vuex@3.4.0/dist/vuex.js"></script>

更新：

如果您使用相同的配置对象创建多个存储，例如在测试期间，也可以记录此警告。

下面是一个例子：

const config = {
  state: {},

  modules: {
    foo: {}
  }
}

const store1 = new Vuex.Store(config)
const store2 = new Vuex.Store(config)

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

问题是配置包含一个根state对象。第一个商店将foo模块添加到该对象。当第二个商店尝试做同样的事情时，它发现该属性已经存在并记录错误。

如果根state对象是空的，就像在我的例子中一样，那么它可以被删除。但是，假设它不是空的，您可以通过将其更改为函数来解决此问题：

const config = {
  state () {
    return {
      /* state properties here */
    }
  },

  modules: {
    foo: {}
  }
}

这与data组件的功能完全相同。