Beispielcode für Vuex-Modularisierung und Namespaces

Dieser Artikel stellt Ihnen den Beispielcode zur Vuex-Modularisierung und zum Namensraum vor. Ich hoffe, dass er für Freunde hilfreich ist.

Da der Vuex Store global registriert ist, was für größere Projekte nicht förderlich ist, führen Sie Module ein, um Geschäftszustände und -methoden zu trennen, und führen Sie Namespaces ein, um das Problem von Namenskonflikten (Getter, Mutationen, Aktionen) in verschiedenen Modulen zu lösen

Erstellen Sie zuerst ein Modul./store/modules/sample.js

import SampleAPI from '@/api/sample-api-proxy.js'
import { _AjaxUrl } from '@/store/constants'

const state = {
    all: []
}
const mutations = {
    resolve (state, payload) {
        for (let item of payload) {
            state.all.push(item)
        }
    }
}
const getters = {
    allstr (state) {
        return state.join(',')
    }
}
const actions = {
    async init ({commit,state}, pid) {
        await SampleAPI.get(_AjaxUrl + '/api/game/all', params: {pid}).then((res) => {
            state.all = res.all
            commit('resolve', res.data)
        })
    }
}

export default {
    namespaced: true,
    state, mutations, getters, actions
}

./store/index.js Injizieren Sie das Modul

import Vuex from 'vuex'
import sample_module from './modules/sample'
import other_module from './modules/other'

export default new Vuex.Store({
    //全局Store对象
    mutations,
    actions,
    state,

    //模块
    modules: {         
        sample: sample_module,
        other: other_module
    }
})

Store bei der Stammkomponente im Launcher (main.js) registrieren

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
new Vue({
    el: '#app',
    data() {
        return { rootParam: 'test' }
    },
    store,
    router,
    template: &#39;<Home/>&#39;,
    components: { Home }
})

Seitenkomponente (./ Components/sample.vue) und Aufruf

d477f9ce7bf77f53fbcf36bec1b69b7a
    e0e6b80c2b871989cf94b51f0a97caf2
    ff6d136ddc5fdfeffaf53ff6ee95f185
        812dff9318af9b7948efb4895c16189e
            45a2772a6b6107b401db3c9b82c049c2{{item}}54bdf357c58b8a65c66d7c19c8e4d114
            577c8aaa514dd152173aa604081ed818删除65281c5ac262bf6d81768915a4a77ac0
        bed06894275b65c1ab86501b08a632eb
    929d1f5ca49e04fdcb27f9465b944689
    dc6dce4a544fdca2df29d5ac0ea9906b{{all2str}}16b28748ea4df4d9c2150843fecfba68
    16b28748ea4df4d9c2150843fecfba68
21c97d3a051048b8e55e3c8f199a54b2

53715f61b05ece25dda41380dffc42d7
@import '~style/common.styl'
nospace()
    margin 0
    padding 0
height(h)
    height unit(h, 'px')
    line-height unit(h, 'px')

.sample-ul
    list-style-type none
    @nospace
    li
        display block
        height(20)
    &:hover
        background-color #fcc
531ac245ce3e4fe3d50054a55f265927

5d85af4682789b26597d1a5619846b60
import { createNamespacedHelpers, mapState } from 'vuex'
const { mapActions, mapGetters, mapMutations } = createNamespacedHelpers('sample')
const { mapActions: mapOtherActions, mapGetters: mapOtherGetters } = createNamespacedHelpers('other')

export default{
    data() {
      return {

      }
    },
    computed: {
        ...mapState({
            all : state => state.sample.all
        }),
        ...mapGetters(['all2str']),
        ...mapOtherGetters(['test'])
    },
    methods: {
        ...mapActions(['loadDataAsync']),
        ...mapMutations(['removeItem']),
        ...mapOtherMutations(['testing'])
    },
    created() {
        const pid = this.$route.query.pid
        this.loadDataAsync(keep, pid)
    }
}
2cacc6d41bbb37262a98f745aa00fbf0

Es wird empfohlen, den Objekterweiterungsoperator zum Mischen von MapMutations, MapGetters, MapActions und zu verwenden mapState in Seitenkomponenten. Die Seite dient nur der interaktiven Erfahrung, vermischen Sie nicht zu viel Geschäftslogik und Status
Zu Namespace über createNamespacedHelpers zuordnen

Projektstruktur:

├── index.html
├── main.js
├── api
│   ├── sample-api-proxy.js
│   └── ...
├── components
│   ├── sample.vue
│   └── ...
└── store
    ├── index.js
    ├── actions.js
    ├── mutations.js
    ├── state.js
    └── modules
        ├── sample.js
        └── other.js

Verwandte Empfehlungen:

Was ist die Vue-Komponente? Einführung in Vue-Komponenten

Kommunikation zwischen untergeordneten Vue-Komponenten und übergeordneten Komponenten (mit Code)

Das obige ist der detaillierte Inhalt vonBeispielcode für Vuex-Modularisierung und Namespaces. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!