Exemple de code pour la modularisation et les espaces de noms vuex

Cet article vous présente l'exemple de code sur la modularisation et l'espace de noms vuex. Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Étant donné que Vuex Store est enregistré à l'échelle mondiale, ce qui n'est pas propice aux projets plus importants, des modules sont introduits pour séparer les états et méthodes métier, et des espaces de noms sont introduits pour résoudre le problème des conflits de noms (getters, mutations, actions) dans différents modules

Créez d'abord un module./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 Injecter le module

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

Enregistrer le magasin sur le composant racine dans le programme de démarrage (main.js)

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

Déclarez et appelez

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

dans le composant de page (./components/sample.vue). pour utiliser l'opérateur d'expansion d'objet pour mapMutations, mapGetters, mapActions, mapState est mélangé dans le composant de page. La page n'est utilisée que pour une expérience interactive. Ne mélangez pas trop de logique métier et d'état. 🎜>
Structure du projet :

├── 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

Recommandations associées :

Qu'est-ce que le composant vue ? Introduction aux composants Vue

Communication entre les composants enfants Vue et les composants parents (avec code)

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!