特别声明:本文是作者 Alex Jover 发布在 VueDose 上的一个系列。

版权归作者所有。

译者在翻译前已经和作者沟通得到了翻译整个系列的授权。

为了不影响大家阅读,获得授权的记录会放在本文的最后。

Vue.js 2.6 介绍了一些新的特性,其中我喜欢的一个就是全局 API:Vue.observable

现在你可以在组件作用域之外创建响应式对象。并且当你在组件里使用它们时,它会在发生改变时触发相应的渲染更新。

基于此,你可以在不需要 vuex 的情况下就能创建一个简易的 stores,非常适合于一些简单的场景,比如说仅需要跨组件共享外部状态。

举个例子,我们现在就来创建一个简单的计算器来暴露 state 给我们的 store。
首先创建 store.js 文件:

1
2
3
4
5
import Vue from "vue";

export const store = Vue.observable({
count: 0
});

如果你熟悉并喜欢 mutations 和 actions 的设计思想,那么你也可以创建一个简单的函数来更新数据:

1
2
3
4
5
6
7
8
9
10
11
import Vue from "vue";

export const store = Vue.observable({
count: 0
});

export const mutations = {
setCount(count) {
store.count = count;
}
};

现在你只需要在组件中使用它,就像使用 Vuex 一样地去获取 state,我们将会用到计算属性和调用 mutations 的实例方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<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 上编译好了,去看看吧!

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

结语

由于公众号文章不允许放置外链,大家可以点击文章最下方左侧的「阅读原文」,至掘金社区阅读。

此系列的其他文章,会同步系列官网的发布情况,及时地翻译发布到掘金。请持续关注「程序猿何大叔」,相信我会给大家带来更多优质的内容,不要忘了点赞~

如果想要了解译者的更多,请查阅如下:

请求翻译授权记录

请求翻译授权记录



微信公众号


觉得本文不错的话,分享一下给小伙伴吧~