vuex介绍
需求:父子组件的传值可以通过props和发布事件来传递,不相关的组件如何传递数据,或者说共用一份数据呢?这时候可以借助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文件。
第三步
在main.js中引入这个文件,并声明。
第四步
终于可以在组件中使用啦。
第五步
验证结果。
疑问:
mapActions:用来做关联,定义事件的方法时,需要关联到vuex里面mutaion定义的操作。
官方解释是,在组件中使用this.$store.dispatch('xxx')分发action,或者使用mapActions辅助函数将组件的methods映射为store.dispatch调用。
state的数据如何生效的,我们知道,data,props,computed都是可以存放数据的地方,state就是存放在computed里的,但我们不需要定义comouted。