state : 单一状态树(单一数据源),主要是用来存放状态的 如: count:0
Getters :类似于单个组件里面的计算属性
mutations : 状态更新的唯一方式: commit mutations
主要分为2部分:
1.字符串的事件类型
increment(state){state.count++} 在这里面 increment 就是字符串的事件类型
2.回到函数(第一个参数就是state)
increment(state){state.count++} 在这里面 (state){state.count++} 就是回调函数
通过mutations更新,
通过commit 如:
increment:function(){
this.$store.commit('increment')
}
关于mutations 提交参数: 可以跟在字符串事件类型后面 参数被称为是mutations的载荷(Payload) 负载的意思
例子:
//1.这是一根普通的提交方式
addcount(count){
this.$store.commit('incrementCount' , count)
}
mutations里面的接收方式:
incrementCount(state,count){
state.count += count
}
普通方式提交过来的只是 变量
//2.特殊的提交方式
//type:存放字符串事件类型
addcount(count){
this.$store.commit({
type:'incrementCount',
count:count
})
}
mutations里面的接收方式:
incrementCount(state,payload){
state.count += payload.count
}
特殊方式提交过来的参数是个对象 所以应该用对象来接收
Mutatioin的响应规则
store中的state 只要定义属性之后,这些属性都会加入到响应式系统中,而响应式系统会监听属性的变化,当属性发生变化时,会通知所有界面中用到该属性的地方,让界面发生变化
响应式的给数组对象添加一条数据,需要用 state.数组对象名字.push(参数:传过来的那条数据)
或者单纯的给对象添加一个key跟value :响应式的添加: Vue.set(state.对象名,key,value) 例子: Vue.set(state.info,'address','广州')
响应式的删除对象中的某个属性 : Vue.delete(state.对象名,属性名) 例子: Vue.delete(state.info, 'age')
Mutation的命名规范问题
在mutation中,官方建议:定义变量名(这样说应该没错)
在store文件夹中再次创建一个mutations-types.js文件,在该文件中定义变量名 ,举个例子:export const INCREMENT ='increment'
导出了多条时候,在App.vue文件中接受下: import * as types from "./store/mutations-types";
这样在App.vue中,我们就可以直接使用types.INCREMENT来放到this.store.commit()中去;
在store下面的index.js中采用以下的方式:
先导入mutations-types.js 文件: import * as types from "./store/mutations-types";
然后在mutations中就可以按照以下的方式使用了。
[types.INCREMENT](state){ state.count++ }