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

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

华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com

RTX 5090要首发 性能要翻倍!三星展示GDDR7显存

三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。

首次推出的GDDR7内存模块密度为16GB,每个模块容量为2GB。其速度预设为32 Gbps(PAM3),但也可以降至28 Gbps,以提高产量和初始阶段的整体性能和成本效益。

据三星表示,GDDR7内存的能效将提高20%,同时工作电压仅为1.1V,低于标准的1.2V。通过采用更新的封装材料和优化的电路设计,使得在高速运行时的发热量降低,GDDR7的热阻比GDDR6降低了70%。