在讲vuex数据丢失的问题之前呢,先讲怎么写vuex
1.需要配置(我这里由于需要的内容可能以后会用到,所以分开来写的)
在vue的src目录下创建一个store文件夹 里面有store.js、getters和modules文件夹
modules文件夹下有app.js和user.js文件
store.js在全局main.js里引入
import store from './store/store'
在store.js里写
import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import app from './modules/app'
import user from './modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
modules: {
app,
user
},
getters
})
export default store
然后在user.js里写
import axios from 'axios'
import '../../axios/index'
import qs from 'qs'
import Cookies from 'js-cookie'
const user = {
state: {
kk: {},
getJurisdiction: []
},
mutations: {
// getJurisdiction
SET_KK: (state, kk) => {
state.kk = kk
},
//设置需要存到vuex里的数据
SET_GETJURISDICTION: (state, getJurisdiction) => {
state.getJurisdiction = getJurisdiction
}
},
actions: {
// 登录 在登录按钮函数里执行这个函数 (接口自己调整 kk是登录的时候传进来的参数)
Login({
commit
}, kk) {
return new Promise((resolve, reject) => {
axios({
method: 'post',
url: '/auth/adminLogin',
data: qs.stringify(kk),
dataType: Object
}).then(res => {
Cookies.set('token', res.data.result)
Cookies.set('userName', res.data.message)
commit('SET_GETJURISDICTION', res.data.perms)
//导出接口需要的数据
resolve(res.data)
// console.log(res)
}).catch(error => {
reject(error)
})
})
}
// // 登出
// LogOut({
// commit
// }) {
// return new Promise(resolve => {
// removeToken()
// removeIsLogin()
// removeUserInfo()
// // localStorage.removeItem('groupList')
// resolve()
// })
// }
// }
}
}
export default user
在getters.js里写 分开写是为了方便管理和编写
const getters = {
//就是为了使用的时候取出来
getJurisdiction: state => state.user.getJurisdiction,
kk: state => state.user.kk
}
export default getters
在登录的时候这么写this.$store.dispatch(‘要调用的函数’, 要传的参数)
this.$store.dispatch('Login', this.kk).then(r => {
//登录存储权限防止刷新丢失数据
//this.getJurisdiction = r
//window.localStorage.setItem("getJurisdiction",JSON.stringify(this.getJurisdiction));
if(r.code=="200"){
this.$router.push('/platform')
}else{
this.loginShow = true;
}
}).catch(r => {
// this.$router.push({ path: '/' })
this.loginShow = true;
})
然后这个时候已经存储在运行内存中了也就是vuex里了,但是,这个时候回有一个问题,就是刷新页面的时候 数据丢失, 我这里的解决办法是
在APP.vue的created()生命周期里这么写
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("getJurisdiction")) {
this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("getJurisdiction"))))
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload",()=>{
sessionStorage.setItem("getJurisdiction",JSON.stringify(this.$store.state))
})
最后 别忘了退出登录的时候清除sessionStorage里存的值 以防值会覆盖出错