vuex系列之modules用法

一、在实际开发中，我们如果全部的状态管理都写在一个文件里，那么当项目越来越大时就会很难维护了，所以我们就要用到vuex的modules了。看代码

//user.js
const state = {
 name:''
}
const mutations = {
  updateUserName(state,provide){
  state.name = provide
  }
 
}
const actions = {
  
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

date.js
const state = {
 date:''
}
const mutations = {
  updateDate(state,provide){
  state.date = provide
  }
 
}
const actions = {
  
}

export default {
  namespaced: true,
  state,
  mutations,
  actions
}

//index.js
import Vuex from 'vuex'
import user from './modules/user'
import date from './modules/date'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user,
    date,
  },
  
})

export default store

//index.vue
  computed: {
    userName() {
     // 指明是调user模块的属性
      return this.$store.state.user.name
    },
    date() {
     // 指明是调date模块的属性
      return this.$store.state.date.date
    }
  },
  methods:{
  updateUserName(){
  // 指明是调user模块的方法
  this.$store.commit('user/updateUserName','张三')
  },
   // 指明是调date模块的方法
  updateDate(){
   this.$store.commit('date/updateDate','2021.07.14')
  }
  }

上面建了两个js文件，然后分别引入到index.j文件中，记得要用namespaced来避免重名属性带来的影响，然后我们在页面调用时要指明是哪个模块的，不然程序不知道你调用的是哪个模块的哦。