Vuex是Vue中的状态管理工具,当多个组件(这些组件并不是父子关系)需要共享一些数据时,就可以把这些数据存储在Vuex中
安装:npm install vuex --save
基本使用(关键代码):
小节:
1、提取出一个公共的store对象,用于保存在多个组件中共享的状态
2、通过this.$store.属性的方式来访问状态;通过this.$store.commit('mutations中的方法')来修改状态
Vuex的5个核心概念:state、mutations、getters、actions、modules
Getters使用:有两种参数形式
Mutations使用:
在通过mutations提交数据时,我们也可以携带一些参数,这里的参数被称为载荷(Payload)
以上代码这种特殊的提交方式,Mutation的处理方式是将整个commit的对象作为payload使用
注:Vuex中最初state中放入的属于都被响应式系统管理起来,如果后续向往里面添加或删除响应式数据,则:
添加:Vue.set(对象,属性,属性值)
删除:Vue.delete(对象,属性)
Actions的使用:
通常情况下,Vuex要求我们Mutaions中的方法必须是同步方法,主要原因是当我们使用devtools时,其可以帮助我们捕捉mutaion的快照;但如果是异步操作,该工具将不能很好的追踪操作的完成
actions中的方法一般处理异步请求,但结果还需commit至mutations中的方法,借助mutaions中的方法完成视图的更新
Modules的使用:
Vue使用单一状态树,那么也意味着很多状态都会交给Vuex来管理,当应用病的非常复杂时,store对象就有可能变得相当臃肿。为了解决这个问题,Vuex允许我们将store分割成多个模块,每个模块又拥有自己的state,mutaions,actions,getters,modules