问题 : 在vue项目中,刷新页面之后,之前的登录信息, 打开的所有菜单,都消失, 如何实现刷新之后页面仍然是刷新之前的状态
解决 : 使用vuex状态管理, 搭配 , webstorage本地存储. 将vuex里面的数据同步更新到 localStorage/sessionStorage里存储
以登录信息为例:
- 每次登录成功, 将用户名存进webstorage(根据具体需求去选择localStorage/sessionStorage)
- 每次页面刷新后, 在页面的挂载(mounted)后, 都先尝试从webstorage去获取用户名
* 若能获取到,则代表已登录过, 将用户名从webstorage取出赋给vuex中的变量, 渲染回页面 (那样F5刷新后,用户看到的页面还是刷新前的)
* 若不能获取到(得到undefined) ,则代表没有登录过, 则取空值赋给vuex (页面则没有登录信息) - 退出登录 : 将vuex中保存的用户名设为空, 同时需要手动清除webstorage中储存的数据
1.vuex (index.js)中代码:
import Vue from 'vue'
import Vuex from 'vuex'
import axios from 'axios'
Vue.use(Vuex)
//创建存储对象Store,并导出
export default new Vuex.Store({
//state负责:保存共享数据,供各个组件使用
state: {
uname:""
},
//mutations:专门负责: 写函数, 来修改state中的变量
//注意:不能放异步,不能做ajax请求
//第一个参数, 接到state,通过state.操作state里的变量
//第二个参数,接到外部传递进来的数据
mutations: {
setUname(state,uname){
state.uname=uname;
}
},
//actions:专门负责:发送异步ajax请求,从服务器端获取数据
//context代表整个vuex对象
//另外只能有一个参数,但要接可能不止一个值,所以可以以一个对象的形式接多组值
actions