目录
(一)State-单一状态树的简单理解:在一个项目中只建一个store
(三)mutation同步操作
Vuex核心概念
- State
- Getters
- Mutation
- Action
- Module
(一)State-单一状态树的简单理解:在一个项目中只建一个store
Single Source of Truth :单一数据源
eg:系统不统一造成的信息的分散可能会带来麻烦:要求去各种系统找各种信息。低效且不方便管理。消耗大量的人力物力。
- Vuex推荐只使用一个状态,即使你有很多信息。这样方便管理和维护。所以使用单一状态树来管理应用层级的全部状态。
- 单一状态数能够让我们最直接的找到某个状态的片段,而且在之后的调试和维护过程中也非常方便。
(二)getter的基本使用
和计算属性很像
将变量做某种变化(如加减乘除运算等)后直接使用
getter默认不能传递参数,如果想传参使用,那么getters内部函数要返回一个带有参数的函数
moreAgeStu(state){//返回学生年龄大于传入值的学生对象
// return function(age){
// return state.students.filter(s=>s.age>age)
// }
return age => {//推荐这种写法,阅读性强
return state.students.filter(s => s.age > age)
}
}
简单来讲就是有一些数据必须经过变化才能使用时候,在getters中定义变化的函数,默认传入state对象,在函数内部写好要实现的功能,在Vue实例中直接通过($store.getters.函数名)即可拿到属性
(三)mutation同步操作
mutation状态更新
mutation主要包括两部分:
- 字符串的事件类型
- 一个回调函数(handler),该回调函数的第一个参数就是state
mutation的定义方式:
mutations:{
increment(state){
state.count++;
}
}
通过mutation更新:
increment:function() {
this.$store.commit('increment')//传入的是事件类型
}
从vue实例methods中添加方法,传入mutation,然后返回结果
- 在通过mutation更新数据的时候,有可能我们希望携带一些额外的参数,比如添加学生对象,对数字的自定义加减等等,可以在传给mutation值时在后面跟上要添加的数据
- 参数被称为mutation的载荷(Payload)
- 若要添加的参数不是一个,一般以对象的形式传递,也就是payload是一个对象,这个时候可以再从对象中取出相关的信息
例如添加一个学生:
//App.vue
addStudent() {
const stu={id:4,name:"李",age:40}
this.$store.commit("addStudent",stu)
}
//index.js中的mutations
addStudent(state, stu) {
this.state.students.push(stu);
}
mutation提交风格
- 上面的commit进行提交只是一种普通的方式
- Vue还提供了另外一种风格,他是一个包含type属性的对象
//普通提交方式
this.$store.commit("addStudent",payload)
//特殊提交方式
this.$store.commit({
type: "addStudent",//事件类型,
count:count
})
mutation响应规则
响应式系统会自动监听属性的变化,当属性发生变化时,会通知所有界面中用到该属性的地方,让界面发生刷新,但要求属性必须在响应式系统中初始化
- 修改在响应式系统中的属性:直接修改
- 要添加一个在响应式系统中不存在的属性:不能直接添加,它不具有响应式,要用Vue.set()新增一个属性
- 删除响应式属性:delete state.对象.属性
mutation类型常量
mutation中定义了很多事件类型(方法名称),方法过多时,可能会出现写错的情况,建议封装成一个常量导入引用
(四)action
action类似于Mutation,但是是用来替代Mutation进行异步操作的。