vuex基础

vuex介绍

需求:父子组件的传值可以通过props和发布事件来传递,不相关的组件如何传递数据,或者说共用一份数据呢?这时候可以借助vuex了。

官方文档

图示:


vuex操作图示

图示解读:

state是存储数据的地方,相当于组件的data部分

mutation是定义操作的地方,用于修改数据,在actions和components里是不能直接操作数据的

actions是提交事件,调用相应操作的地方,提交的参数就是mutation里面定义的操作函数,相当于回调函数,就可以修改state了,(官方:action类似于mutation,不同的是,action提交mutation,不能直接变更状态,action可以包含以部操作)

流程:用户通过交互触发相应的事件,传递到actions,actions帮我们提交事件,调用mutation里的操作来修改数据,mutaion接到事件之后就修改state里的数据,用户就可以从state获得修改之后的数据了

代码实现过程

第一步

安装vuex,通过 npm install vuex命令进行安装。

第二步

新建store.js文件。


store.js

第三步

在main.js中引入这个文件,并声明。


main.js

第四步

终于可以在组件中使用啦。


Home.vue

第五步

验证结果。

疑问:

mapActions:用来做关联,定义事件的方法时,需要关联到vuex里面mutaion定义的操作。

官方解释是,在组件中使用this.$store.dispatch('xxx')分发action,或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用。

state的数据如何生效的,我们知道,data,props,computed都是可以存放数据的地方,state就是存放在computed里的,但我们不需要定义comouted。

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

推荐阅读更多精彩内容

  • 目录 - 1.什么是vuex? - 2.为什么要使用Vuex? - 3.vuex的核心概念?||如何在组件中去使用...
    我跟你蒋阅读 9,557评论 4 51
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 7,990评论 0 7
  • vuex 场景重现:一个用户在注册页面注册了手机号码,跳转到登录页面也想拿到这个手机号码,你可以通过vue的组件化...
    sunny519111阅读 12,440评论 4 111
  • ### store 1. Vue 组件中获得 Vuex 状态 ```js //方式一 全局引入单例类 // 创建一...
    芸豆_6a86阅读 4,017评论 0 3
  • 文/凉树姑娘 我做了很多事,一开始以为是为了你,后来才明白其实是为了自己。只不过,如果没有你,我也根本不会去做这些...
    凉树姑娘阅读 4,520评论 4 3