vuex结构目录梳理

vuex里面的数据一般我们就不另辟蹊径了,直接就用state表示,state接下来就是vuex里面的数据代号了。    

state一般都存储在一个叫store(仓库)里面,vuex要求我们是不能直接去修改store里面的state的,想要修改store里面的数据,我们要用到一个叫mutations的东西,这个mutations是我们自己定义的,vuex官方既然就叫它mutations,那我们也这么写好了(其实把它定义成 aaa bbb都可以,这里只是为了让跟我一样的小白万一看到了不要执着于为什么要这样叫),mutations里面放的是一些修改数据的方法,这些方法都是一些同步的操作(同步的操作:互不影响,我执行我的你执行你的,不存在谁要等谁先执行完了)

vuex里面还有一个表示动作的东西叫做actions(同mutations一样可以自己定义),在组件里面我们可以去分配要执行的动作,可以是异步操作,比如:在actions里面去向后台接口获取数据,完成以后在actions里面再去  提交  mutations的方法,达到修改state里面的某些数据。(加粗的‘提交’,这里涉及到一个翻译过来的方法叫 commit,例举一个简单的方法吧,这样说怕还是不够形象


getters —— 基于store里面的state去计算出各种不同类型的值,getters的作用可以理解为官方专门定义这个方法,用来整理项目中所有对state数据进行计算的小方法,不用getters也是可以写的,只不过用了代码结构看上去会更清晰。具体的写法如下:


这里的 store 其实就是上面的 aa,(因为截图的时候没有截取同一天的代码 emmmmmmm.....)

当getters里面的方法很多的时候,那我们就需要在  .vue  的组件当中写很多的 this.$store.getters.xx (xx代表getters里面的方法) ,那重复写很多个这样的东西是很烦人的,于是vuex官方定义了 mapGetters这样一个东西,它的作用就是不用写辣么多同样的代码了,

仅限于引入getters里面的方法
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 8,082评论 4 111
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,974评论 0 7
  • 上一章总结了 Vuex 的框架原理,这一章我们将从 Vuex 的入口文件开始,分步骤阅读和解析源码。由于 Vuex...
    你的肖同学阅读 1,830评论 3 16
  • Vuex 是什么? ** 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式**。它采用集中...
    Rz______阅读 2,328评论 1 10
  • 沟通有多么重要,多少道理,都比不上我们亲身经历的故事,那么,就让我给你讲一个发生在学校里再平常不过的故事吧: 那天...
    爱君如初阅读 899评论 0 1