[vue] Basic usage of modules in vuex

1. When to use modules

Due to the use of a single state tree, all the state of the application will be concentrated into a relatively large object. When the application becomes very complex, the store object can become quite bloated.
To solve the above problems, Vuex allows us to split the store into modules. Each module has its own state, mutation, action, getter, and even nested submodules—segmented in the same way from top to bottom.
Use: namespaced: true, namespace in the module, after adding, the current module Identifiers can be the same as other modules to resolve naming conflicts between different modules

2, store file structure

3.1 Manually introduce modules in index.js

import Vue from 'vue'
import Vuex from 'vuex'

import bus from './modules/bus'
import app from './modules/app'

const path = require('path')

Vue.use(Vuex)

let store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    namespaced: true,
    app,
    bus
  }
});

export default store

3.2 Dynamically import modules into index.js

import Vue from 'vue'
import Vuex from 'vuex'
const path = require('path')

Vue.use(Vuex)

const files = require.context('./modules', false, /\.js$/)
let modules = {}
files.keys().forEach(key => {
  let name = path.basename(key, '.js')
  modules[name] = files(key).default || files(key)
})

let store = new Vuex.Store({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules
});

export default store

4. The code in the app.js file

let user = {
  namespaced: true,
  state: {},
  mutations: {
    setUser(state, val) {
      state.user = val;
    }
  },
  getters: {},
  actions: {
    setName(state, val) {
      return new Promise(resolve => {
        setTimeout(function () {
          state.user = val;
          resolve(state.user);
        }, 2000)
      })
    }
  }
}

export default user;

5. Configure main.js and mount store

new Vue({
  el: '#app',
  router,
  store,
  components: { App: App },
  template: '<App/>'
})

6, used in vue

    // commit 执行mutations里的方法，同步操作
    this.$store.commit('app/setUser', {name: '张三'});
    console.log(this.user.name);
    // dispatch 执行actions里的方法，异步操作
    this.$store.dispatch('app/setName', {name: '李四'}).then(res => {
      console.log(res.name);
    })

7, used in js

// 引入 这里的store 就相当于页面中的 this.$store
import store from '@/store'

export const setCurUser = (user) => {
    let curUser = store.app.user
    if(!curUser) {
        store.commit("app/setUser", user)
        return user
    }
    
    return curUser
}

Notice:

1. Version matching of vue and vuex

Vue2 uses vuex3; vue3 uses vuex4. Otherwise, there will be an error that this.$store is undefined

extend:

1, five states of vuex state, getter, mutation, action, module

state: All shared data is placed in state, similar to data

mutation: similar to events, used to change the state

action: similar to mutation, but action is an asynchronous operation

getter: similar to computed in vue, cache and form new data

modules: Sub-modules, one object management for large projects will be bloated

[vue] Basic usage of modules in vuex

Guess you like