如何对组件进行简单的状态管理？

Question

Vue 文档为单文件应用程序提供了 example of simple state management：

const sourceOfTruth = {}

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

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

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

我试图将最小状态管理器的概念转移到组件中 in a codesandbox.io sandbox。它没有用，我认为更有意义的错误是

The "data" option should be a function that returns a per-instance value in component definitions.

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

Answer 1

试试这个Sandbox updated

在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>

Answer 2

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

也许使用 "Event Bus" 更适合您 example。

你的这段代码错了，我们总是需要导出代码。 export default function dataMaster() { return { msg: "hello from dataMaster" }; }

Answer 3

"data" 选项应该是一个函数，因为纯对象可能会使数据混乱。例如，当 "sourceOfTruth" 被 componentA 修改，但你专注于 componentB，你会感到困惑。所以请使用 "vuex" 或 "eventbus".

Answer 4

The "data" option should be a function that returns a per-instance value in component definitions

表示你在组件中定义的data属性必须是一个函数，而那个函数应该return一个每个实例值。你应该，而不是任何必须这里，它可以被欺骗。

关于报错，你报错不是因为状态管理，而是因为你忘记导出dataMaster.js中的函数，所以无法导入并在 HelloWorld.vue 中使用它。你得到这个错误是因为你没有 return 函数 ，那是 function 部分，而不是 per -instance 或任何与状态管理相关的东西。

要执行我认为您想要的技巧，请执行此操作：https://codesandbox.io/s/unruffled-carson-l3oui。您可以直接从组件更改相同的真实来源，而无需 VueX 之类的工具。但这很棘手，并且正是错误试图避免的，return 每个实例值 。我还不知道它的优点和缺点是什么，但归根结底，我认为做状态管理，我们应该使用以前人推荐的标准方式，比如 VueX 等，只需从中选择一个很多。

// dataMaster.js
const data = {
  msg: "hello From dataMaster"
};

export default function dataMaster() {
  return data // this is not "per-instance", they're the same across all instances
}

//Hello.vue
<template>
  <div>
    {{msg}}
    <button @click="change">Change</button>
  </div>
</template>

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

export default {
  name: "HelloWorld",
  data: dataMaster,
  methods: {
    change() {
      this.msg = this.msg === "message1" ? "message2" : "message1";
    }
  }
};
</script>

如何对组件进行简单的状态管理？

How to do simple state management with components?

state-management

vue.js

vue-component