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。