一、优势
- 体量比vuex小,使用维护成本相对较低
- 用于数据共享,当十几个组件同时共用一套数据时候,把数据独立抽离出来,方便维护也可以实现多个组件之间数据的共享和更新
二、使用
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>