A brief discussion on the state support function declaration in Vuex@2.3.0

Release Notes for vuex 2.3.0: Modules can now declare state using a function - this allows the same module definition to be reused (. multiple times in the same store, or in multiple stores)

If your vuex module has multiple formats that are exactly the same, you can publicly use this module and reference it in the Vuex instance, such as:

import api from '~api'

const actions = {
  async ['get']({commit, rootState: {route: { path }}}, config = {}) {
    const { data: { code, data } } = await (, )
    if (code === 1001) commit('receive', data)
  }
}

const mutations = {
  ['receive'](state, data) {
     = [].concat(data)
  },
  ['modify'](state, payload) {
    const index = (item =>  === )
    if (index > -1) {
      (index, 1, payload)
    }
  },
  ['insert'](state, payload) {
     = [payload].concat()
  },
  ['remove'](state, id) {
    const index = (item =>  === id)
    (index, 1)
  }
}

const getters = {
  ['get'](state) {
    return 
  }
}
export const _actions = actions
export const _mutations = mutations
export const _getters = getters
export default {
  namespaced: true,
  actions,
  mutations,
  getters
}

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

import lists from './general/lists'

(Vuex)

export default new ({
  namespaced: true,
  modules: {
    base: {
      namespaced: true,
      modules: {
        app: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
        platform: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
        product: {
          namespaced: true,
          modules: {
            category: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
          }
        },
        keyword: {
          namespaced: true,
          modules: {
            username: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
          }
        },
      }
    },
    buzz: {
      namespaced: true,
      modules: {
        shop: {...lists, state: { lists: { data: [], total: 0, current_page: 1 } }},
      }
    }
})

However, state requires each individual setting. If it is set directly in lists, the state object will be referenced and shared

In [email protected], this problem will not exist

import api from '~api'

const actions = {
  async ['get']({commit, rootState: {route: { path }}}, config = {}) {
    const { data: { code, data } } = await (, )
    if (code === 1001) commit('receive', data)
  }
}

const mutations = {
  ['receive'](state, data) {
     = [].concat(data)
  },
  ['modify'](state, payload) {
    const index = (item =>  === )
    if (index > -1) {
      (index, 1, payload)
    }
  },
  ['insert'](state, payload) {
     = [payload].concat()
  },
  ['remove'](state, id) {
    const index = (item =>  === id)
    (index, 1)
  }
}

const getters = {
  ['get'](state) {
    return 
  }
}
export const _actions = actions
export const _mutations = mutations
export const _getters = getters
export default {
  namespaced: true,
  state() {
    return { lists: { data: [], total: 0, current_page: 1 } }
  },
  actions,
  mutations,
  getters
}

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

import lists from './general/lists'

(Vuex)

export default new ({
  namespaced: true,
  modules: {
    base: {
      namespaced: true,
      modules: {
        app: lists,
        platform: lists,
        product: {
          namespaced: true,
          modules: {
            category: lists,
          }
        },
        keyword: {
          namespaced: true,
          modules: {
            username: lists,
          }
        },
      }
    },
    buzz: {
      namespaced: true,
      modules: {
        shop: lists,
      }
    }
})

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.

A brief discussion on the state support function declaration in [email protected]