Javascript vuex-作为函数或对象文本返回的状态

前几天我遇到了一个问题，并向great stack社区寻求解决方案

问题是： 我在其他模块中嵌套了相同的模块，但我是这样定义状态的：

state: {
  // some state here
}

所发生的是我的所有模块，尽管它们看起来嵌套在不同的模块下，但所有模块都共享相同的状态

解决方案 解决方案是让函数返回状态，而不是将其定义为对象文本。为什么有点道理。以下是我的问题

新问题

当状态被定义为一个对象文本而函数返回一个对象文本时，在存储的后台会发生什么

为什么不使用函数版本？这似乎很容易成为默认选择，但即使在这种情况下，它们也选择将状态显示为对象文字

tl；dr使用函数的原因是。

---

当状态被定义为一个对象文本而函数返回一个对象文本时，在存储的后台会发生什么

为此，最好：

如您所见，上面的代码检查是否提供了

状态。如果不是，它将指定一个空对象（
{}
）作为初始
状态

接下来，它检查
状态
是否是
函数
。如果是，则执行它并将返回的内容分配给
状态。如果它返回了
undefined
（或任何假值），它会再次将空对象
{}
赋值给
状态

这就是作为对象或函数提供
state
之间的区别：如果提供了一个对象或函数，它就会被执行。如果提供了对象，则直接指定该对象



为什么不使用函数版本？这似乎很容易成为默认选择，但即使在vuex文档中的模块中，它们也选择将状态显示为对象文字

一般来说，是的，对象版本可能更常见，因为您通常只声明一次
存储
对象（及其
状态
），然后在Vue实例中使用它

状态
函数otoh的用例是：

模块重用
例如，有时我们可能需要创建一个模块的多个实例
例如：


创建使用同一模块的多个存储（例如，在启用runInNewContext选项时在SSR中）
错误或“一次”）
在同一个内存中多次注册同一模块
商店

另一种可能的情况是，仅声明一次Vuex模块，并尝试在不同名称空间下多次使用它

由于上述示例类似，下面是一个演示（模块案例）来说明问题：


const personModule={
名称空间：对，
国家：{name:“name”}，
突变：{
更改名称（状态，数据）{state.name=data}
}
}
const myStore=new Vuex.Store({
严格：是的，
模块：{
aliceNamespace:personModule，
bobNamespcace：个人模块
}
});
新Vue({
商店：myStore，
el:“#应用程序”，
安装的（）{
本协议。更改Alice名称（“Alice”）；
此项。更改BobName（“Bob”）；
},
计算：{
…Vuex.mapState（'aliceNamespace'，{AliceName:'name'}），
…Vuex.mapState（'bobNamespcace'，{BobName:'name'}）
},
方法：{
…Vuex.MapTranslations（'aliceNamespace'，{ChangeAliceName:'changeName'}），
…Vuex.MapTranslations（'bobNamespcace'，{ChangeBobBSName:'changeName'}）
}
})

爱丽丝的名字：{{alicesName}


鲍勃的名字：{{bobsName}}


改变爱丽丝的名字
由于vuex是一个商店管理系统，因此状态有一个单独的insane是有意义的，请记住，我们正在从vuex保存和检索数据，因此状态必须是一个对象，否则函数每次都会返回新值DIT：更新答案，添加到vuex官方文档的模块重用部分的链接（他们明确提到了功能）。
state() {
  return {
    // state here instead
  }
}

var Store = function Store (options) {
  // ...
  var state = options.state; if ( state === void 0 ) state = {};
  if (typeof state === 'function') {
    state = state() || {};
  }