按照官方文档使用vueX固然会储存数据(一般存储token);路由导航中一般会提取储存的token值。当登录后跳转新页面,并且刷新后会清除掉。这就需要对储存方式做一些改动。
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);
const state = {
token: null
};
// vuex中获取存储值的方式
const getters = {
getToken(state){
// 改进方法就是判断存储的token是否有值,没有的话就从浏览器会话信息中存储的token中获取。
if (!state.token) {
state.token = sessionStorage.getItem("token");
}
// 下面是基础的获取存储的token值
return state.token;
},
};
// vuex中存储值的方法,只能通过commit()的方式,触发mutations中定义的方法更新/存储值
const mutations = {
setToken(state, token) {
// 改进方法是把token值储存在sessionStorage(会话信息)中,特点是当浏览器关闭时,会话信息会清除掉,增强token的保密性;
sessionStorage.setItem("token", token);
// 注释部分就是最基础的vueX的存储方法
state.token = token;
},
};
const store = new Vuex.Store({
state,
getters,
mutations,
});
export default store;
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
// 更新存储数据
this.$store.commit("setToken", this.user.password);
// 获取存储数据
console.log(this.$store.getters.getToken);