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。它没有用，我认为更有意义的错误是

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

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

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

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

这意味着您在组件中定义的data属性必须是一个函数，并且该函数应该返回一个每个实例值。您应该，这里没有任何必须，这可能会被欺骗。

关于该错误，您得到此错误不是由于状态管理，而是因为您忘记了在dataMaster.js 中导出该函数，因此您无法在HelloWorld中导入和使用它.vue。您收到错误是因为您没有返回功能，那不是功能部分，不是每个实例或与状态管理相关的任何事情

要执行我认为想要的技巧，这里是：https://codesandbox.io/s/unruffled-carson-l3oui。您可以直接从组件更改相同的事实来源，而无需使用VueX之类的工具。但这很棘手，而且正是错误要避免的事情，返回每个实例的值。我尚不知道它的优点和缺点，但是归根结底，我认为要进行状态管理，我们应该使用以前的人推荐的标准方法，例如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>

Answer 3

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

Answer 4

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

也许example对您来说更适合使用“事件总线”。

您对这段代码有误，我们总是需要导出代码。 export default function dataMaster() { return { msg: "hello from dataMaster" }; }

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

4 个答案: