element ui框架（vuex模块化）

【 声明：版权所有，欢迎转载，请勿用于商业用途。 联系信箱：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。这个是实际开发中经常遇到的错误。