Vue 小型状态管理器认识Vue.observable

前言：每天多学一个知识点，就能少些一行代码，让项目更加轻量级。

随着项目组件的细化，经常性的遇到多组件之间状态共享的情况，之前可使用Vuex解决这类问题，不过参照Vuex官网介绍，如果应用不够大，为避免代码繁琐冗余，最好不要使用它，今天了解一下Vue.js2.6 新版本中新增的一个东西Vue.observable(object),这个API的出现能替代以前使用vuex进行数据状态管理的方案。通过使用这个 api 我们可以应对一些简单的跨组件数据状态共享的情况。官网描述如下 Vue.observable( object )

observable()方法，用于设置监控属性，这样就可以监控view视图Module中的属性值的变化，从而就可以动态的改变某个元素中的值，监控属性的类型不变量而是一个函数，通过返回一个函数给viewModule对象中的属性，从而来监控该属性。

我们举例看一下它的使用

// store.js
import Vue from 'vue'

export const state = Vue.observable({ 
  count: 0 
})

使用Vue.observable(object)

<div @click="setCount">{{ count }}</div>

import {state} from '../store.js'

export default {
    computed: {
        count() {
            return state.count
        }
    },
    methods: {
        setCount() {
            state.count++
        }
    }
}

之前也可以使用vuex自定义mutation来复用更改状态

import Vue from 'vue'

export const state = Vue.observable({ 
  count: 0 
})

export const mutations = {
  SET_COUNT(payload) {
    if (payload > 0) {
        state.count = payload
    } 
  }
}

使用：

import {state, mutations} from '../store.js'

export default {
    computed: {
        count() {
            return state.count
        }
    },
    methods: {
        setCount() {
            mutations.SET_COUNT(100)
        }
    }
}

对比一下两种方法可达到同样的效果，但是对于中小型项目，使用Vue.observable()进行状态管理足够了。

前端路漫漫其修远兮，吾将上下而求索，一起加油，学习前端吧~

欢迎留言讨论~:stuck_out_tongue_closed_eyes:

Vue 小型状态管理器 认识Vue.observable

Vue 小型状态管理器认识Vue.observable