• 原文地址： 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