Aussage zu staatlichen Unterstützungsfunktionen in Vuex@2.3.0

In diesem Artikel wird hauptsächlich die Erklärung der staatlichen Unterstützungsfunktion in Vuex@2.3.0 vorgestellt. Der Inhalt ist ziemlich gut. Ich werde ihn jetzt als Referenz verwenden.

Versionshinweise für vuex 2.3.0: Module können jetzt ihren Status mithilfe einer Funktion deklarieren – dies ermöglicht die Wiederverwendung derselben Moduldefinition (z. B. mehrmals im selben Store oder in mehreren Stores)

Wenn Ihr Vuex-Modul mehrere Formate hat, die genau gleich sind, können Sie dieses Modul öffentlich machen und in der Vuex-Instanz darauf verweisen, wie zum Beispiel:

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

Der Status muss jedoch individuell festgelegt werden. Wenn er direkt in Listen festgelegt wird, wird das Statusobjekt referenziert und freigegeben

in vuex@2.3. 0, dieses Problem wird nicht existieren

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

Das Obige ist der gesamte Inhalt dieses Artikels, ich hoffe, er wird für das Studium aller hilfreich sein, bitte achten Sie darauf zu weiteren verwandten Inhalten der chinesischen PHP-Website!

Verwandte Empfehlungen:

VUEJS 2.0-Unterkomponentenzugriff/Aufruf der übergeordneten Komponente

Über die Methode des Vue2 SSR-Caching API-Daten

Das obige ist der detaillierte Inhalt vonAussage zu staatlichen Unterstützungsfunktionen in Vuex@2.3.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!