Vuex
认识Vuex
Vuex是一个专为vue.js应用程序开发的状态管理模式
它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可以预测的方式发生改变
状态管理模式
状态管理模式、集中式存储管理
可以简单的看做:把需要多个组件共享的变量全部存储到一个对象当中;然后将这个对象放到顶层的Vue实例当中,让其他组件可以使用
一般什么会放到Vuex中
- 状态需要在页面之间共享的
比如:登录状态、用户名、头像、地理位置信息
比如:购物车信息
vuex内容解析
官方文档:https://vuex.vuejs.org/zh/guide/
state
存放变量
mutations
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation;类似于事件。
尽量不要再mutations中进行异步操作。
将mutations方法名修改成为常量
新建mutations_type.js用来存储静态变量
store.js中mutations
方法的定义也可以使用如下这种方式
[静态变量](参数)
{
//方法体
}
actions
对state进行异步操作
基本用法
actions代码段
actions:{
aupdatePerson(context,payload){
setTimeout(() => {
context.commit("updatePerson");
console.log(payload.message);
payload.success();
}, 1000);
}
}
Vue方法代码段
this.$store.dispatch('aupdatePerson',{
message:'携带的信息',
success:()=>{
console.log("异步完成")
}
})
使用promise
actions:{
aupdatePerson(context,payload){
return new Promise((resolve,reject)=>{
setTimeout(() => {
context.commit('updatePerson')
console.log(payload);
resolve("promise中传递数据")
}, 1000);
})
}
}
Vue代码段
this.$store.dispatch('aupdatePerson',"异步携带的信息").then(res=>{
console.log("异步完成");
console.log(res);
})