Vuex
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。
它采用 集中式存储管理 应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
单界面的状态管理
State:不用多说,就是我们的状态。
View:视图层,可以针对State的变化,显示不同的信息。
Actions:这里的Actions主要是用户的各种操作:点击、输入等等,会导致状态的改变。
挂载到Vue实例中
1.让所有的Vue组件都可以使用这个store对象
2.来到main.js文件,导入store对象,并且放在new Vue中
3.,在其他Vue组件中,我们就可以通过this.$store
的方式,获取到这个store对象了
Vuex核心概念
Vuex有几个比较核心的概念:
◼ State => data
◼ Getters => computed
◼ Mutation => methods
◼ Action => 异步操作
◼ Module => 模块化
Mutation状态更新
Vuex的store状态的更新唯一方式:提交Mutation
◼ Mutation主要包括两部分:
◼ 字符串的事件类型(type)
◼ 一个回调函数(handler),该回调函数的第一个参数就是state。 ◼ mutation的定义方式:
◼ 通过mutation更新
Mutation传递参数
在通过mutation更新数据的时候, 有可能我们希望携带一些额外的参数
参数被称为是mutation的载荷(Payload)
Action
Action类似于Mutation, 但是是用来代替Mutation进行异步操作的.
context
◼ context是和store对象具有相同方法和属性的对象.
◼ 我们可以通过context去进行commit相关的操作, 也可以获取
context.state等
Action的分发
在Vue组件中, 如果我们调用action中的方法, 那么就需要使用dispatch
◼ 同样的, 也是支持传递payload
Module
我们在moduleA中添加state、mutations、getters