Vue.js 2.6 介紹了一些新的特性，其中我喜歡的一個就是全域性 API：Vue.observable
現在你可以在元件作用域之外建立響應式物件。並且當你在元件裡使用它們時，它會在發生改變時觸發相應的渲染更新。
基於此，你可以在不需要 vuex 的情況下就能建立一個簡易的 stores，非常適合於一些簡單的場景，比如說僅需要跨元件共享外部狀態。
舉個例子，我們現在就來建立一個簡單的計算器來暴露 state 給我們的 store。
首先建立 store.js 檔案：
import Vue from"vue";
exportconst store = Vue.observable({
count: 0
});
複製程式碼如果你熟悉並喜歡 mutations 和 actions 的設計思想，那麼你也可以建立一個簡單的函式來更新資料：
import Vue from"vue";
exportconst store = Vue.observable({
count: 0
});
exportconst mutations = {
setCount(count) {
store.count = count;
}
};
複製程式碼現在你只需要在元件中使用它，就像使用 Vuex 一樣地去獲取 state，我們將會用到計算屬性和呼叫 mutations 的例項方法。
<template>
<div>
<p>Count: {{ count }}</p>
<button @click="setCount(count + 1);">+ 1</button>
<button @click="setCount(count - 1);">- 1</button>
</div>
</template>
<script>
import { store, mutations } from "./store";
export default {
computed: {
count() {
return store.count;
}
},
methods: {
setCount: mutations.setCount
}
};
</script>
複製程式碼如果你想要親自試試這個例子，我已經為你在 CodeSandbox 上編譯好了，去看看吧！
你可以線上閱讀這篇 原文，裡面有可供複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！