vue学习-状态管理

使用reactive打造简单状态管理。（复杂的用Vuex）

适用于全局的数据变更，需要更新下面多个层级的组件的情况。（props只适合父子组件传递）

1.用一个store.js专门保存全局信息

// store.js
import { reactive } from "vue";

export default {
  state: reactive({ globalMsg: "全局信息" }),

  setGlobalMsg(newValue) {
    this.state.globalMsg = newValue;
  },
};

2.需要用到这个全局数据的，保存store.state

// StoreB.vue
<template>
  <div>b:{
  { state.globalMsg }}</div>
</template>

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

export default {
  data() {
    return {
      state: store.state,
    };
  },
  mounted() {},
};
</script>

3.当其他组件改变这个全局数据，其他使用这个全局属性的组件都会自动更新

// StoreA.vue
<template>
  <div>a:{
  { state.globalMsg }}</div>

  <hr />
  <store-b></store-b>
</template>

<script>
import StoreB from "./StoreB.vu