状态作为函数或对象文字返回
有一天我遇到了问题，并向伟大的堆栈社区寻求解决方案。
问题：
我在其他模块中嵌套了相同的模块，但我是这样定义状态的：
state: {
// some state here
}
发生了什么是我的所有模块，尽管看起来被嵌套在不同的模块中，所有模块都共享相同的状态。
解决方案
state() {
return {
// state here instead
}
}
解决方案是有一个函数返回状态，而不是将其定义为对象文字。 为什么有点合理。 这是我的问题
新问题
当状态被定义为一个对象字面量与一个返回对象字面量的函数时，商店内部发生了什么？
为什么你不使用功能版本？ 它似乎很容易成为默认选择，但即使在modules vuex文档中，它们也选择将状态显示为对象字面值。
tl; dr使用函数的原因是模块重用 。
当状态被定义为一个对象字面量与一个返回对象字面量的函数时，商店内部发生了什么？
为此，更好地检查下引擎盖：
var Store = function Store (options) {
// ...
var state = options.state; if ( state === void 0 ) state = {};
if (typeof state === 'function') {
state = state() || {};
}
正如你所看到的，上面的代码检查是否提供了一个state 。 如果不是，则分配一个空对象（ {} ）作为初始state 。
接下来它检查state是一个function 。 如果是，则执行它，并分配给state它所返回。 如果它返回undefined （或任何falsy值）它，再次分配给state的空对象{}
所以这就是将state作为对象或函数提供的区别：如果提供了一个，它就会被执行。 如果提供了对象，则直接分配该对象。
为什么你不使用功能版本？ 它似乎很容易成为默认选择，但即使在模块的vuex文档中，它们也选择将状态显示为对象字面值。
通常情况下，对象版本可能更常见，因为您通常只声明store对象（及其state ）一次，并将其用于Vue实例中。
state函数otoh的用例是模块重用 ：
模块重用
有时我们可能需要创建一个模块的多个实例，例如：
另一种可能的情况是，如果你仅仅声明一次Vuex模块并试图在不同的命名空间下多次使用它。
正如上面的例子是类似的，下面是一个演示（模块案例）来说明问题：
const personModule = {
namespaced: true,
state: {name: "name"},
mutations: {
changeName(state, data) { state.name = data }
}
}
const myStore = new Vuex.Store({
strict: true,
modules: {
aliceNamespace: personModule,
bobNamespcace: personModule
}
});
new Vue({
store: myStore,
el: '#app',
mounted() {
this.changeAlicesName("Alice");
this.changeBobsName("Bob");
},
computed: {
...Vuex.mapState('aliceNamespace', {alicesName: 'name'}),
...Vuex.mapState('bobNamespcace', {bobsName: 'name'})
},
methods: {
...Vuex.mapMutations('aliceNamespace', {changeAlicesName: 'changeName'}),
...Vuex.mapMutations('bobNamespcace', {changeBobsName: 'changeName'})
}
})<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app">
<p>Alice's name: {{ alicesName }}</p>
<hr>
<p>Bob's name: {{ bobsName }}</p>
<hr>
<button @click="changeAlicesName('Eve')">Change Alice's Name</button>
</div>