element ui框架（vuex模块化）

上一节我们说到了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显示部分的内容是否依然正常。如果一切都没有问题，那说明我们的修改是正确的。如果问题比较大，那需要回头看一下，究竟是什么地方出了问题。

element ui框架（vuex模块化）

8、进一步的部署和测试

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

秒客网

element ui框架（vuex模块化）

相关文章