Vuex

引入vuex:

     npm install vuex --save

在项目的src里面建立文件夹store,文件如下:

store目录

在index.js引入vue和vuex:

在index.js里面定义state状态值:

接下来在getters.js里定义一个类似计算属性的方法:

就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

在mutation-types.js里定义好事件类型:

更改 Vuex 的 store 中的状态的唯一方法是提交 mutation:

Action 类似于 mutation,不同在于:

Action 提交的是 mutation,而不是直接变更状态。

Action 可以包含任意异步操作。

store的调用:

最后就是调用computed获取到的方法:

(以上代码都是以图片形式展示,一是为了防止码农的通病——复制粘贴,二是可以让人多敲敲代码,这样敲一遍记得更牢,若有哪里讲得不好请大家在评论里指正一下,Thanks♪(・ω・)ノ)

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 3,019评论 0 7
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应...
    白水螺丝阅读 4,748评论 7 61
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 2,104评论 3 3
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,152评论 4 111
  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 1,877评论 3 16

友情链接更多精彩内容