阅读 346

在 Vue.js 2.6 中不使用 Vuex 来创建 store

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 上编译好了,去看看吧!

你可以在线阅读这篇 原文,里面有可供复制粘贴的源代码。如果你喜欢这个系列的话,请分享给你的同事们!

转自【译】Vue 的小奇技(第六篇):在 Vue.js 2.6 中不使用 Vuex 来创建 store

关注下面的标签,发现更多相似文章
评论