Vuex@2.3.0 中的 state 支持函數申明瞭

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,
            }
        }
})