使用Observable实现Vue全局状态共享

项目不大, 又不想用Vuex, 那么使用Observable来实现状态共享也不失为一个选择.

- 先来看看官方资料,

Vue.observable( object )

2.6.0 新增

• 参数
  {Object} object
• 用法 -
  让一个对象可响应。Vue 内部会用它来处理 data 函数返回的对象

此API为2.6版本新增, 那么低版本是不兼容, 会报出以下错误:

vue__.default.observable is not a funcion

解决方法是将Vue升级到^2.6.0 即可.

- 写个Demo看看

创建store

// 文件路径 - /store/store.js
import Vue from 'vue'

export const store = Vue.observable({ count: 0 })
export const mutations = {
  setCount (count) {
    store.count = count
  }
}

使用

<template>
    <div>
        <label for="bookNum">数 量</label>
            <button @click="setCount(count+1)">+</button>
            <span>{{count}}</span>
            <button @click="setCount(count-1)">-</button>
    </div>
</template>

<script>
import { store, mutations } from '../store/store' // Vue2.6新增API Observable

export default {
  name: 'Add',
  computed: {
    count () {
      return store.count
    }
  },
  methods: {
    setCount: mutations.setCount
  }
}
</script>

就这么点, 轻量好用.