浅谈Vuex@2.3.0 中的 state 支持函数申明

vuex2.3.0的发布说明:Modulescannowdeclarestateusingafunction-thisallowsthesamemoduledefinitiontobereused(e.g.multipl

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。