Maison > interface Web > js tutoriel > le corps du texte

Déclaration sur les fonctions de support d'état dans Vuex@2.3.0

不言
Libérer: 2018-06-29 16:51:36
original
1482 Les gens l'ont consulté

Cet article présente principalement la déclaration de la fonction de support d'état dans Vuex@2.3.0. Le contenu est assez bon, je vais le partager avec vous maintenant et le donner comme référence.

Notes de version pour vuex 2.3.0 : les modules peuvent désormais déclarer un état à l'aide d'une fonction - cela permet de réutiliser la même définition de module (par exemple plusieurs fois dans le même magasin ou dans plusieurs magasins)

Si votre module Vuex a plusieurs formats exactement identiques, vous pouvez rendre ce module public et le référencer dans l'instance Vuex, par exemple :

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
}
Copier après la connexion

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 } }},
      }
    }
})
Copier après la connexion

Mais l'état doit être défini individuellement s'il est défini directement dans les listes, l'objet d'état sera référencé et partagé dans

<. 🎜> Dans vuex@2.3.0, ce problème n'existera pas

import api from &#39;~api&#39;

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

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

const getters = {
  [&#39;get&#39;](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
}
Copier après la connexion

import Vue from &#39;vue&#39;
import Vuex from &#39;vuex&#39;

import lists from &#39;./general/lists&#39;

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,
      }
    }
})
Copier après la connexion
Ce qui précède est tout le contenu de cet article, j'espère ce sera utile pour l'apprentissage de tout le monde Aide, veuillez faire attention au site Web PHP chinois pour plus de contenu connexe !

Recommandations associées :

Accès au sous-composant VUEJS 2.0/composant parent d'appel

À propos de la méthode de mise en cache Vue2 SSR Données API

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal