vue.js - 如何用组件做简单的状态管理？

Question

Vue 文档提供了一个简单的状态管理示例，用于单文件应用程序：

const sourceOfTruth = {}

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

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

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

我试图将这个最小状态管理器的概念移到codeandbox.io 沙箱中的组件中。它没有用，我相信更有意义的错误是

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

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

标签： vue.jsvue-componentstate-management

Answer 1

试试这个沙盒更新

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