1.基本使用方法
mutation 中不能使用异步操作
state单一状态树
只写一个state 如果有其它公共的state需要写 可以进行模块化划分
getters的基本使用
getters作为参数和传递参数
mutation传递参数
1.传入一个参数
<button @click="addCount(5)">+5</button>
<button @click="addCount(10)">+10</button>
methods: {
addCount(count) {
// payload: 负载
// 1.普通的提交封装
// this.$store.commit('incrementCount', count)
// 2.特殊的提交封装
this.$store.commit({
type: 'incrementCount',
count //整个 commit里的东西变成一个对象 叫 payload
})
},
addStudent() {
const stu = {id: 114, name: 'alan', age: 35}
this.$store.commit('addStudent', stu)
},
}
incrementCount(state, payload) {
// console.log(count);
state.counter += payload.count
},
addStudent(state, stu) {
state.students.push(stu)
},
mutation相应规则
在action里使用异步操作,用于替代mutation
action的默认属性 context = 上下文
updateInfo() {
// this.$store.dispatch('aUpdateInfo', {
// message: '我是携带的信息',
// success: () => {
// console.log('里面已经完成了');
// }
// })
// context: 上下文
// aUpdateInfo(context, payload) {
// setTimeout(() => {
// context.commit('updateInfo')
// console.log(payload.message);
// payload.success()
// }, 1000)
// },
-----------------------------------------------!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
aUpdateInfo(context, payload) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('updateInfo');
console.log(payload);
resolve('1111111')
}, 1000)
})
}
this.$store
.dispatch('aUpdateInfo', '我是携带的信息')
.then(res => {
console.log('里面完成了提交');
console.log(res);
})
modules的使用
<h2>{{$store.state.a.name}}</h2> // a被放在了state里面
modules: {
a: moduleA
}
const moduleA = {
state: {
name: 'qwe'
}
}