Vue.observable简单实现公共状态管理

store.js文件内部写法：

import vue from 'vue';
// 创建公共数据store
export const store = vue.observable({ count: 0 });
// 创建更改状态的方法，创建后在组件内直接使用，也可不使用，在组建内直接书写
export const mutation = {
  setCount(count) {
    store.count = count;
  }
}

非父子组件list内部写法：

<template>
  <div style="width:100%">
      <button @click="handle">更改数值</button> 
      <!-- 绑定公共状态值 -->
      <div>{{listCount}}</div>
  </div>
</template>

<script>
import { store, mutation } from "../store";
export default {
  name: "List",
  data() {
    return {
      
    };
  },
  methods: {
    handle() {
      // 更改公共数据
      store.count = "listVal";
    }
    // 这里也可以写成,二选一即可
    // handle:mutation.setCount
  },
  computed: {
    // 利用计算属性监听计算属性变化
    // 公共数据变化后，更新属性值
    listCount() {
      return store.count;
    }
  }
};
</script>

<style lang="scss">
</style>

非父子组件home内部写法：

<template>
  <div style="width:100%">
      <button @click="handle">更改数值</button> 
      <!-- 绑定公共状态值 -->
      <div>{{homeCount}}</div>
  </div>
</template>

<script>
import { store, mutation } from "../store";
export default {
  name: "Home",
  data() {
    return {
      
    };
  },
  methods: {
    handle() {
      // 更改公共数据
      store.count = "homeVal";
    }
    // 这里也可以写成,二选一即可
    // handle:mutation.setCount
  },
  computed: {
    // 利用计算属性监听计算属性变化
    // 公共数据变化后，更新属性值
    homeCount() {
      return store.count;
    }
  }
};
</script>

<style lang="scss">
</style>

代码截图：