vuex 2.3.0 的发布说明: Modules can now declare state using a function - this allows the same module definition to be reused (e.g. multiple times in the same store, or in multiple stores)

假如你 vuex 的模块有多个格式是完全一样的, 这时候就可以把这个模块公共出来, 在 Vuex 实例里引用, 如:

import api from '~api'

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

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

const getters = {
    ['get'](state) {
        return state.data
    }
}
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'

Vue.use(Vuex)

export default new Vuex.Store({
    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 } }},
            }
        }
})

但是 state 却需要每个单独设置, 如果直接设置在lists里, 会导致 state 对象被引用共享

在 vuex@2.3.0 中, 这个问题将不存在

import api from '~api'

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

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

const getters = {
    ['get'](state) {
        return state.data
    }
}
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'

Vue.use(Vuex)

export default new Vuex.Store({
    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,
            }
        }
})