Modules for the Vuex series

First, in real development, if we had all the state management in one file, it would be difficult to maintain as the project grew larger, so we used Vuex modules. Look at the code

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

export default {
  namespaced: true,
  state,
  mutations,
  actions
}
Copy the code

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

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

Copy the code

//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
Copy the code

//index.vue
  computed: {
    userName() {
     // call the user module property
      return this.$store.state.user.name
    },
    date() {
     // Specifies the attribute of the date module
      return this.$store.state.date.date
    }
  },
  methods: {updateUserName(){
  // specify the method to call the user module
  this.$store.commit('user/updateUserName'.'Joe')},// specifies the method to call the date module
  updateDate(){
   this.$store.commit('date/updateDate'.'2021.07.14')}}Copy the code

J file, remember to use namespaced to avoid the effects of the same name attribute, and then we need to specify the module when the page is called, otherwise the application will not know which module you are calling.