element ui框架（vuex3使用）

Posted 2022-09-24 嵌入式-老费

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：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: '<App/>',
  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();
)