• 赚钱入口【需求资源】限时招募流量主、渠道主,站长合作;【合作模式】CPS长期分成,一次推广永久有收益。主动打款,不扣量;

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

Vue cps12345 1年前 (2020-06-13) 619次浏览

项目不大的情况下,使用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看看

1.创建store

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

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

2. 使用

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

怎么样,很简单吧。。
喜欢 (1)