vue开发技巧——状态共享

使用Vue进行开发时，随着项目的复杂化，组件个数也逐渐增加，此时我们就面临着一个问题——多组件状态共享。当然有人会说使用Vuex来解决啊，但是如果此时我们的项目没有那么大那么复杂，在使用Vuex会导致繁琐冗余

那该怎么办？其实我们还可以通过vue.js2.6版本新增的Observable API来解决这个问题。

示例
a) 创建一个 store.js，包含一个store和一个mutations，分别用来指向数据和处理方法。

1 2 3 4 5 6 7

import Vue fomr 'vue' export const Vue.observable( obj: {count: 0 }) export const mutations = {   steCount(count){   store.count = count   } }

b) 在 App.vue里面引入这个 store.js，使用引入的数据和方法。

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

<template>   <div id="app">     <p>count:{{count}}</p>     <div @click="steCount(count+1)">+1</div>     <div @click="steCount(count-1)">-1</div>   </div>   <template>   <script>     import { store, mutations } from '/store/store';     export default {       name: "App",       computed: {         count（）{           return store.count;         }       },       methods:{         steCount:mutations.setCount       }     }   <script>