vuex的使用
简单store对象
每一个 Vuex 应用的核心就是 store(仓库)。“store”基本上就是一个容器,它包含着你的应用中大部分的状态 (state)。
const store = new Vuex.Store({
state:{
//存放的键值对就是所要管理的状态
//记录登录状态
loginState:
uni.getStorageSync('loginState')?uni.getStorageSync('provider'):false,
//记录登录信息
loginProvider:
uni.getStorageSync('provider')?uni.getStorageSync('provider'):'未登录',
serverUrl:"http://localhost:8081/" //封装 后端接口地址
},mutations:{
//回调函数
MLOGIN(state,provider,loginState){
uni.setStorageSync('provider',provider);
state.loginState = true;
uni.setStorageSync('loginState',true);
},
MLOGOUT(state) {//state是方法的第一个参数
uni.clearStorageSync();
}
}
})
更改 Vuex 的 store 中的状态的唯一方法是提交 mutation。
Vuex 中的 mutation 非常类似于事件:
每个 mutation 都有一个字符串的事件类型 (type)和一个回调函数 (handler)。
这个回调函数就是我们实际进行状态更改的地方,并且它会接受 state 作为第一个参数
使用Storage缓存
将我们的登录状态和用户的一些信息(头像地址,用户名,会员信息等)给存储起来,我们就要使用到uni.setStorageSync(“KEY”,“VALUE”);
在其他页面中使用state中的共享数据 通过this关键字获取 this.$store.state.变量名,如果出错,就在方法前 定义一个变量(这里没有深究,自行百度) let that = this;
onShow() {
//不知道为什么会这样
let that = this;
if(that.$store.state.loginState){
this.showLogin = false;
}
}