随着项目组件的细化，经常性的遇到多组件之间状态共享的情况，之前可使用Vuex解决这类问题，不过参照Vuex官网介绍，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天了解一下Vue.js2.6 新版本中新增的一个东西Vue.observable(object),这个API的出现能替代以前使用vuex进行数据状态管理的方案。通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。 官网描述如下 Vue.observable( object )
observable()方法，用于设置监控属性，这样就可以监控view视图Module中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给viewModule对象中的属性，从而来监控该属性。
新建一个Vue Cli 使用一下Vue.Observable:
新建 store.js
import Vue from "vue" export const state = Vue.observable({ count: 0 })
页面1：
<template> <div class="observable"> <h4>Observable1</h4> <div class="observable-layout"> <button @click="add">add</button> <h4>{{ count }}</h4> <button @click="reduce">reduce</button> </div> <div><button @click="go">go to Observable2</button></div> </div> </template> <script> import { state } from "./store.js"; export default { data() { return {}; }, computed: { count() { return state.count; }, }, methods: { add() { state.count++; }, reduce() { state.count--; }, go() { this.$router.push({ name: "About" }); }, }, }; </script>
页面2：
<template> <div class="about"> <div class="observable"> <h4 style="color: red">Observable2</h4> <div class="observable-layout"> <button @click="add">add</button> <h4>{{ count }}</h4> <button @click="reduce">reduce</button> </div> <div><button @click="go">go back Observable1</button></div> </div> </div> </template> <script> import { state } from "./observable/store.js"; export default { data() { return {}; }, computed: { count() { return state.count; }, }, methods: { add() { state.count++; }, reduce() { state.count--; }, go() { this.$router.push({ name: "Observable" }); }, }, created() { console.log(this.count); }, }; </script>
在 页面1 操作 count ，页面2 数据也会同步；
也可以使用vuex自定义mutation来复用更改状态
import Vue from "vue" export const state = Vue.observable({ count: 0 }) export const mutations = { add(payload) { if (payload > 0) { state.count = payload } }, reduce(payload) { if (payload > 0) { state.count = payload } } }
具体使用：
<script> import { state, mutations } from "./store.js"; export default { data() { return {}; }, computed: { count() { return state.count; }, }, methods: { add() { mutations.add(99); }, reduce() { mutations.reduce(1); }, go() { this.$router.push({ name: "About" }); }, }, }; </script>
不想 使用 vuex 做数据共享和更新时 ，可以使用 Vue.observable( Object )，实现多个组件之间数据的共享和更新，更加简洁的实现我们想要的效果
