【 声明:版权所有,欢迎转载,请勿用于商业用途。 联系信箱:feixiaoxing @163.com】
前面我们使用了sessionStorage实现了登陆状态的保存。但是sessionStorage保存的数据是有限的,如果希望实现vue不同组件之间的数据共享,可以使用vuex来实现。目前和vue2比较match的vuex是vuex3,这一点需要注意下。
1、安装vuex3
npm install vuex@3 --save-dev
2、在main.js中添加vuex
- import Vuex from 'vuex'
- Vue.use(Vuex)
3、创建一个store目录,准备index.js文件
- import Vue from 'vue'
- import Vuex from 'vuex'
-
- Vue.use(Vuex)
-
- const state = {
- user:{
- name:''
- }
- };
-
- const getters = {
- getUser(state) {
- return state.user;
- }
- };
-
- const mutations = {
- updateUser(state,user){
- state.user = user;
- }
- };
-
- const actions = {
- asyncUpdateUser(context, user){
- context.commit("updateUser", user);
- }
- };
-
- export default new Vuex.Store({
- state,
- getters,
- mutations,
- actions
- })
4、在main.js中加入刚刚创建的store对象
- import store from './store'
-
- /* eslint-disable no-new */
- new Vue({
- el: '#app',
- router,
- store,
- components: { App },
- template: '
' , - render:h=>h(App)
- })
5、在submitForm中增加代码
this.$store.dispatch("asyncUpdateUser", {name:this.form.name});
6、在Main.vue中修改span中的显示方法
<span>{{$store.getters.getUser.name}}span>
7、测试验证
在没有添加vuex之前,登录到Main页面之后。如果继续点击/MemberLevel,或者是/MemberList,就会出现用户丢失的情况。现在有了vuex,这种现象不会出现了。
8、继续解决页面刷新后,用户信息丢失的问题
要解决这个问题,需要有两个地方做出修改,一个是在Main.vue中添加页面刷新回调,保证页面刷新前数据保存到sessionStorage;另外一个就是store的index.js做出修改,主要是state的初始化。
8.1 Main.vue添加回调函数
- export default {
- name: "Main",
- mounted() {
- window.addEventListener('unload', this.saveState())
- },
- methods: {
- saveState() {
- console.log(JSON.stringify(this.$store.state));
- sessionStorage.setItem('state', JSON.stringify(this.$store.state));
- }
- }
- }
8.2 修改store/index.js中state的初始化函数
- const state = sessionStorage.getItem('state')?JSON.parse(sessionStorage.getItem('state')):{
- user:{
- name:''
- }
- };
有了8.1和8.2这两部分,基本就可以解决页面F5刷新后,用户信息丢失的问题。
9、针对前一篇登录状态保留中的作弊问题,因为有了store数据,这里其实也可以一并修改了,
- router.beforeEach((to,from,next)=>{
- let isLogin = sessionStorage.getItem('isLogin')
-
- if(to.path=='/Logout'){
- sessionStorage.clear()
- next({path:"/Login"})
- }
- else if(to.path == '/Login') {
- if(isLogin != null) {
- next({path:('/Main/'+store.getters.getUser.name)}) // 修改一处
- }
- }
- else if(to.path == '/') {
- if(isLogin != null) {
- next({path:('/Main/'+store.getters.getUser.name)}) // 修改二处
- }
- else{
- next({path:'/Login'})
- }
- }
- else if(isLogin == null){
- next({path:'/Login'})
- }
-
- next();
- })