vue.js之vuex:状态字段 "foo"被 "foo"处的同名模块覆盖

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

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

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

请您参考如下方法:

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