element ui框架（vuex模块化）

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

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：feixiaoxing @163.com】

        上一节我们说到了vuex在数据保存中的作用。其实vuex在实际使用中，需要保存非常多的数据，不可能所有的数据都放到index.js里面。因此，有必要把数据放到单独的模块里面。今天就来讨论一下，如何把数据放到单独的模块里面。

1、首先在store目录下创建modules目录

        创建modules目录的目的，就是为了把相关的数据处理文件都集中放到这一个地方。

2、将之前store/index.js中的部分内容拷贝到store/modules/user.js下面，

const user = 
	
	state : sessionStorage.getItem('state')?JSON.parse(sessionStorage.getItem('state')):
		user:
			name:''
		
	,

	getters : 
		getUser(state) 
			return state.user;
		
	,

	mutations : 
		updateUser(state,user)
			state.user = user;
		
	,

	actions : 
		asyncUpdateUser(context, user)
			context.commit("updateUser", user);
		
	
;

export default user;

3、重新调整store/index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)



export default new Vuex.Store(
	modules :
		user
	
)

4、重新调整之前saveState函数，

        没有调整前，saveState函数是这么处理的，即

	methods: 
		saveState() 
			console.log(JSON.stringify(this.$store.state));
			sessionStorage.setItem('state', JSON.stringify(this.$store.state));
	

        因为这里的引用变成了state下面的一个user模块，所以需要重新修改下，

	methods: 
		saveState() 
			console.log(JSON.stringify(this.$store.state.user));
			sessionStorage.setItem('state', JSON.stringify(this.$store.state.user));
	
  

5、之前引用user的地方保持不变，，

<span>$store.getters.getUser.name</span>

6、submitForm中引用user的地方也同样不变，

this.$store.dispatch("asyncUpdateUser", name:this.form.name);

7、开始测试

        这部分测试地方，其实和前一节一样。主要还是看，Login页面登录到Main页面后，刷新网页，user显示部分的内容是否依然正常。如果一切都没有问题，那说明我们的修改是正确的。如果问题比较大，那需要回头看一下，究竟是什么地方出了问题。

8、进一步的部署和测试

        如果不仅仅希望用node.js测试，还可以用npm run dev编译，用iis测试，这也是可以的。不过要注意的是，每一次修改修改js代码后都需要重新编译、重新启动iis server。这个是实际开发中经常遇到的错误。