vue开发技巧——状态共享

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

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

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

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

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

<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>