原文作者：Alex Jover
譯者：程式猿何大叔
特別宣告：本文是作者 Alex Jover 釋出在 VueDose 上的一個系列。
版權歸作者所有。
譯者在翻譯前已經和作者溝通得到了翻譯整個系列的授權。
為了不影響大家閱讀，獲得授權的記錄會放在本文的最後。
Vue.js 2.6 介紹了一些新的特性，其中我喜歡的一個就是全域性 API：Vue.observable
現在你可以在元件作用域之外建立響應式物件。並且當你在元件裡使用它們時，它會在發生改變時觸發相應的渲染更新。
基於此，你可以在不需要 vuex 的情況下就能建立一個簡易的 stores，非常適合於一些簡單的場景，比如說僅需要跨元件共享外部狀態。
舉個例子，我們現在就來建立一個簡單的計算器來暴露 state 給我們的 store。
首先建立 store.js 檔案：
import Vue from "vue";
export const store = Vue.observable({
count: 0
});
複製程式碼如果你熟悉並喜歡 mutations 和 actions 的設計思想，那麼你也可以建立一個簡單的函式來更新資料：
import Vue from "vue";
export const store = Vue.observable({
count: 0
});
export const 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 上編譯好了，去看看吧！
你可以線上閱讀這篇 原文，裡面有可供複製貼上的原始碼。如果你喜歡這個系列的話，請分享給你的同事們！
結語
此係列的其他文章，會同步系列官網的釋出情況，及時地翻譯釋出到掘金。請持續關注「程式猿何大叔」，相信我會給大家帶來更多優質的內容，不要忘了點贊~
如果想要了解譯者的更多，請查閱如下：
- 個人部落格：blog.hadesz.com
- 個人 github 倉庫：github.com/hadeshe93
- 個人微信公眾號：搜尋「程式猿何大叔」
請求翻譯授權記錄
覺得本文不錯的話，分享一下給小夥伴吧~