Vuex学习总结
# 一、什么是Vuex
官方文档解释道Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
个人理解就是Vuex可以将所有组件的状态储存在一个对象中,并且实现了响应式。原本我们可能要使用某个组件状态时可能需要层层获取,但这样我们便可以在多个组件中共享状态。
# 二、什么东西该放入Vuex中
并不是我们需要将所有的变量都放入Vuex中,只需要将需要共享的一部分放入,比如用户名,用户头像等多个页面都需要用到的东西。如果父子组件通讯就可以传递的东西,也不需要放入Vuex当中。
# 三、Vuex-state的使用
在我们使用脚手架4创建项目时,会自动生成一个store的文件夹,里面的index.js文件即为我们所创建的"仓库",仓库里的东西在其他任意组件中都可以拿来使用。如下图所示:
idnex.js文件中传入message:
app组件中使用message:
# 四、Vuex-mutations的使用
1.在改变仓库内容时,需要在mutations定义一个方法。不要通过state直接改变内容,如下图所示:(vuex中store状态的唯一更新方法就是提交mutation)
mutations中传入方法changem
app组件中传入方法change(注意这里需要通过commit提交)
2.mutations中方法可以传入两个参数。第二个参数用来接收组件传回的参数.如下:
app组件中传出参数m
mutations中第二个参数用来接收组件传入的。
# 五、Vuex-actions的使用
1.action类似于mutations,但是action中是用来处理异步操作的。上面说过store唯一更新方式是提交mutation,所以使用action时也需要提交mutation
actions中传入方法changemm,参数为context(可理解为就是store对象),changemm中提交mutations中的方法changem
app组件中传入方法change(注意这里需要通过dispatch提交)
2.action也可以接收一个参数。和mutations使用方法相同
# 六、Vuex-modules的使用
modules是模块的意思,vuxex允许我们将store分割成模块,每个模块中同时有有自己的state、mutations、actions等,使用方法和store相同。也是调用$store的内容