vue.js - 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 的工作方式完全相同。一个组件的功能。