Vue.js 如何使用组件进行简单的状态管理？

Vue文档为单个文件应用程序提供了：

const sourceOfTruth = {}

const vmA = new Vue({
  data: sourceOfTruth
})

const vmB = new Vue({
  data: sourceOfTruth
})

如何对组件使用相同的机制？

我试图将最小状态管理器的概念转移到组件中。它不起作用，我认为更有意义的错误是

“数据”选项应该是一个函数，它在组件定义中返回每个实例的值

这是否意味着组件必须是完全独立的，不能依赖外部管理的数据？

试试这个

在dataMaster.js中

 var store = {
  state: {
    message: "Hello!"
  }
};

module.exports = store;

和component.vue

<template>
  <div>
    <h1>{{sharedState}}</h1>
  </div>
</template>

<script>
import store from "./dataMaster";

export default {
  name: "HelloWorld",
  data() {
    return {
      privateState: {},
      sharedState: store.state
    };
  }
};
</script>

{{sharedState}
从“/dataMaster”导入存储；
导出默认值{
名称：“HelloWorld”，
数据（）{
返回{
私有国家：{}，
sharedState:store.state
};
}
};

如果要管理全局状态中的所有数据。您应该搜索并学习Vuex和商店管理

也许使用“事件总线”对你更合适

你的代码错了，我们总是需要导出代码。

导出默认函数dataMaster（）{
返回{
消息：“你好，来自数据主”
};
}

“数据”选项应该是一个函数，因为纯对象可能会使数据混乱。e、 当“sourceOfTruth”被componentA修改，但您关注的是componentB时，您会感到困惑。因此，请使用“vuex”或“eventbus”

“data”选项应该是一个函数，它在组件定义中返回每个实例的值

这意味着您在组件中定义的

data

属性必须是一个函数，并且该函数应该返回每个实例的值。你应该，这里没有任何必须，它可能会被欺骗

关于此错误，您出现此错误不是因为状态管理，而是因为您忘记在

dataMaster.js

中导出函数，因此无法在HelloWorld.vue中导入和使用它。出现错误是因为未返回函数，该函数是函数部分，而不是每个实例或与状态管理相关的任何内容

为了达到我认为你想要的效果，这里是：。您可以直接从组件更改相同的事实来源，但不需要VueX之类的工具。但这很棘手，而且正是错误试图避免的，返回每个实例的值。我还不知道它的优点和缺点是什么，但归根结底，我认为要进行状态管理，我们应该使用以前的人推荐的标准方法，比如VueX等，从他们中选择一种

//dataMaster.js
常数数据={
消息：“你好，来自数据主”
};
导出默认函数dataMaster（）{
返回数据//这不是“每个实例”，它们在所有实例中都是相同的
}
//你好，vue
{{msg}}
改变
从“/dataMaster.js”导入数据主机；
导出默认值{
名称：“HelloWorld”，
数据：数据主机，
方法：{
更改（）{
this.msg=this.msg==“message1”？“message2”：“message1”；
}
}
};

数据

是我在问题中链接的代码中的一个函数。我不确定我是否理解您答案的第二部分：一个组件中的修改反映在另一个组件中，这正是我试图实现的目标。我在沙箱中阅读了您的代码，您的dataMaster.js中有一个错误。您应该在dataMaster fn前面添加“导出默认值”。像这样：

export default function dataMaster（）{return{msg:'hello from dataMaster'}}

至于

这是否意味着组件必须是完全独立的，不能依赖于它们外部管理的数据？

。您可以但不应该将数据混合在一起，因为清晰的数据流比更少的代码更重要。谢谢您的回答。为了说明您的最后一点，Vue本身（在我链接的文档中）建议使用此方法，

vuex

是“工业”解决方案，但我想检查文档中建议的简单解决方案-但在组件上下文中。@WoJ但文档也说

我们现在只有一个真实来源，但调试将是一场噩梦。我们的应用程序的任何部分都可以随时更改任何数据，而不会留下任何痕迹。

我认为上面给出的示例就是该方法的工作实现。它可以在小的例子中使用，但在更大的项目中调试将是一场噩梦。@WoJ但是文档也说，

我们现在只有一个真实的来源，但是调试将是一场噩梦。应用程序的任何部分都可以随时更改任何数据，而不会留下任何痕迹。

我认为上面给出的代码片段是该方法在组件上下文中的一个有效实现。它可以在小的例子中工作，但对于在更大的项目中调试来说，这将是一场噩梦。为了使它在大型项目中更可靠，您将添加一些东西，最终自己也会得到一个VueX。私有和共享状态的好例子！！