Statement about state support functions in Vuex@2.3.0-JS Tutorial-php.cn

Statement about state support functions in Vuex@2.3.0

不言

Release： 2018-06-29 16:51:36

Original

1522 people have browsed it

This article mainly introduces the state support function declaration in Vuex@2.3.0. The content is quite good. I will share it with you now and give it as a reference.

Release Notes for 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)

If your vuex module has multiple formats that are exactly the same, you can make this module public and reference it in the Vuex instance, such as:

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,
  actions,
  mutations,
  getters
}

Copy after login

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

Copy after login

But state needs to be set individually. If it is set directly in lists, it will cause the state object to be referenced and shared

in vuex@2.3. 0, this problem will not exist

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
}

Copy after login

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

Copy after login

The above is the entire content of this article, I hope it will be helpful to everyone's study, please pay attention to more related content PHP Chinese website!

Related recommendations:

VUEJS 2.0 sub-component access/call parent component

About the method of Vue2 SSR caching Api data

The above is the detailed content of Statement about state support functions in Vuex@2.3.0. For more information, please follow other related articles on the PHP Chinese website!