关灯
开启左侧

【Vue 的小奇技】在 Vue.js 2.6 中不使用 Vuex 来创建 store

[复制链接]
老蚊子 发表于 2019-3-8 18:21:33 | 显示全部楼层 |阅读模式 打印 上一主题 下一主题
 
Vue.js 2.6 介绍了一些新的特性,其中我喜欢的一个就是全局 API:Vue.observable
现在你可以在组件作用域之外创建响应式对象。并且当你在组件里使用它们时,它会在发生改变时触发相应的渲染更新。
基于此,你可以在不需要 vuex 的情况下就能创建一个简易的 stores,非常适合于一些简单的场景,比如说仅需要跨组件共享外部状态。
举个例子,我们现在就来创建一个简单的计算器来暴露 state 给我们的 store。
首先创建 store.js 文件:

  1. import Vue from "vue";

  2. export const store = Vue.observable({
  3.   count: 0
  4. });
复制代码
如果你熟悉并喜欢 mutations 和 actions 的设计思想,那么你也可以创建一个简单的函数来更新数据:
  1. import Vue from "vue";

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

  5. export const mutations = {
  6.   setCount(count) {
  7.     store.count = count;
  8.   }
  9. };
复制代码
现在你只需要在组件中使用它,就像使用 Vuex 一样地去获取 state,我们将会用到计算属性和调用 mutations 的实例方法。
  1. <template>
  2.   <div>
  3.     <p>Count: {{ count }}</p>
  4.     <button @click="setCount(count + 1);">+ 1</button>
  5.     <button @click="setCount(count - 1);">- 1</button>
  6.   </div>
  7. </template>

  8. <script>
  9.   import { store, mutations } from "./store";

  10.   export default {
  11.     computed: {
  12.       count() {
  13.         return store.count;
  14.       }
  15.     },
  16.     methods: {
  17.       setCount: mutations.setCount
  18.     }
  19.   };
  20. </script>
复制代码
原文地址:Creating a Store without Vuex in Vue.js 2.6

 
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


1关注

12粉丝

71帖子

排行榜
关闭

站长推荐上一条 /1 下一条

官方微信

全国服务热线:

400-0708-360

公司地址:国家西部信息安全产业基地(成都市高新区云华路333号)

邮编:610000    Email:2908503813@qq.com

Copyright   ©2015-2016  EOIT论坛Powered by©Discuz!    ( 蜀ICP备11000634号-7 )