首先:由于对Vuex还是不太熟悉,所以特此记录一下学习的过程,
完成一次登录状态的过程;
参考:uni-app
vuex官网: https://vuex.vuejs.org/zh/guide/testing.html,
vuex 的管理过程:
流程:
首页为未登录状态 => 进行登录 => 首页状态改变 => 退出应用再次进入仍然是已登录状态
//store.js 进行状态设置,
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {
uerInfo: {},
//isLogin :uni.getStorageSync('isLogin')?true:false,
hasLogin: false
},
mutations: {
login(state, provider) {//改变登录状态
state.hasLogin = true
state.uerInfo.token = provider.token
state.uerInfo.userName = provider.user_name
uni.setStorage({//将用户信息保存在本地
key: 'uerInfo',
data: provider
})
},
logout(state) {//退出登录
state.hasLogin = false
state.uerInfo = {}
uni.removeStorage({
key: 'uerInfo'
})
}
}
})
export default store
在Vuex我们不需要过分关注登录的具体逻辑, 只是完成对状态的保存,(以及对于公共状态的一些操作,之后在其他地方使用 this.$store
调用即可)
值得一说的是, 这个仓库有时间性, 即向 网页中的sessionStroage, 在网页开启时生效, 关闭时就消失,
如果要保持状态需要使用session, cookie 或者token值来确定