Vue.observable()实现状态管理和数据共享

一、优势

1. 体量比vuex小，使用维护成本相对较低
2. 用于数据共享，当十几个组件同时共用一套数据时候，把数据独立抽离出来，方便维护也可以实现多个组件之间数据的共享和更新
   

二、使用

1、创建store.js文件

import Vue from "vue";

// 创建observable,并声明变量
export const store = Vue.observable({
    name: "a",
    count: 0
});

// 创建函数，用于修改变量
export const mutations = {
    // 修改name
    changeName(name) {
        store.name = name;
    },
    // 修改count
    setCount(count) {
        store.count = count;
    }
}

2、在组件中修改变量

// changeStore.vue
<template>
  <div class="changeStore">
  	<!-- 通过输入框修改数据 -->
    <el-input v-model="storeName" @change="changeName(storeName)"></el-input>
    <el-input v-model="storeCount" @change="setCount(storeCount)"></el-input>
  </div>
</template>
<script>
import { mutations } from "@/units/store.js";	// 引入方法
export default {
  name: "changeStore",
  data() {
    return {
      storeName: "张三",
      storeCount: 1,
    };
  },
  methods: {
    ...mutations,	// 使用方法
  },
};
</script>

3、在另一个组件中查看变量

// home.vue
<template>
  <div class="home">
  	{{name}} - {{count}}
  </div>
</template>
<script>
import { store } from "@/units/store.js";	// 引入方法
export default {
  name: "home",
  computed() {
    name() {
    	return store.name;
    },
    count() {
    	return store.count;
    },
  },
};
</script>