【譯】Vue 的小奇技（第六篇）：在 Vue.js 2.6 中不使用 Vuex 來建立 store

• 原文地址：Creating a Store without Vuex in Vue.js 2.6

• 原文做者：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
• 我的微信公衆號：搜索「程序猿何大叔」

請求翻譯受權記錄

---

以爲本文不錯的話，分享一下給小夥伴吧~