Vue中小型狀态管理器observable

大型項目中的資料狀态會比較複雜，一般都會使用 

vuex

 來管理。但在一些小型項目或狀态簡單的項目中，為了管理幾個狀态而引入一個庫，顯得有些笨重。

在 2.6.0+ 版本中，新增的 

Vue.observable

 可以幫助我們解決這個尴尬的問題，它能讓一個對象變成響應式資料：

// store.js
import Vue from 'vue'

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

使用：

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

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

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

然你也可以自定義 

mutation

 來複用更改狀态的方法：

// store.js
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)
        }
    }
}