译者: 程序猿何大叔 https://github.com/hadeshe93
特别声明: 本文是作者 Alex Jover https://twitter.com/alexjoverm 发布在 vueDose https://vuedose.tips 上的一个系列.
版权归作者所有.
译者在翻译前已经和作者沟通得到了翻译整个系列的授权.
为了不影响大家阅读, 获得授权的记录会放在本文的最后.
vue.js 2.6 介绍了一些新的特性, 其中我喜欢的一个就是全局 API:Vue.observable https://cn.vuejs.org/v2/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 https://codesandbox.io/s/k3kpqz2wz7 上编译好了, 去看看吧!
你可以在线阅读这篇 原文 https://vuedose.tips/tips/6/ , 里面有可供复制粘贴的源代码. 如果你喜欢这个系列的话, 请分享给你的同事们!
结语
此系列的其他文章, 会同步系列官网的发布情况, 及时地翻译发布到掘金. 请持续关注「程序猿何大叔」, 相信我会给大家带来更多优质的内容, 不要忘了点赞~
如果想要了解译者的更多, 请查阅如下:
个人博客: https://blog.hadesz.com
个人 GitHub 仓库: https://github.com/hadeshe93
个人微信公众号: 搜索「程序猿何大叔」
请求翻译授权记录
觉得本文不错的话, 分享一下给小伙伴吧~
来源: https://juejin.im/post/5c7cea0d6fb9a049fd1092ae