Beispielcode für Vuex-Modularisierung und Namespaces-js-Tutorial-php.cn

Beispielcode für Vuex-Modularisierung und Namespaces

不言

Freigeben： 2018-08-07 15:02:22

Original

2835 Leute haben es durchsucht

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 &#39;@/api/sample-api-proxy.js&#39;
import { _AjaxUrl } from &#39;@/store/constants&#39;

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

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

Nach dem Login kopieren

./store/index.js Injizieren Sie das Modul

import Vuex from &#39;vuex&#39;
import sample_module from &#39;./modules/sample&#39;
import other_module from &#39;./modules/other&#39;

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

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

Nach dem Login kopieren

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

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

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

Nach dem Login kopieren

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

<template>
    <div id="container">
    <ul>
        <li v-for="(item, index) in all" :key="index">
            <span>{{item}}</span>
            <button @click="removeItem(index)">删除</button>
        </li>
    </ul>
    <div>{{all2str}}</div>
    </div>
</template>

<style rel="stylesheet/stylus" scoped>
@import &#39;~style/common.styl&#39;
nospace()
    margin 0
    padding 0
height(h)
    height unit(h, &#39;px&#39;)
    line-height unit(h, &#39;px&#39;)

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

<script type="text/ecmascript-6">
import { createNamespacedHelpers, mapState } from &#39;vuex&#39;
const { mapActions, mapGetters, mapMutations } = createNamespacedHelpers(&#39;sample&#39;)
const { mapActions: mapOtherActions, mapGetters: mapOtherGetters } = createNamespacedHelpers(&#39;other&#39;)

export default{
    data() {
      return {

      }
    },
    computed: {
        ...mapState({
            all : state => state.sample.all
        }),
        ...mapGetters([&#39;all2str&#39;]),
        ...mapOtherGetters([&#39;test&#39;])
    },
    methods: {
        ...mapActions([&#39;loadDataAsync&#39;]),
        ...mapMutations([&#39;removeItem&#39;]),
        ...mapOtherMutations([&#39;testing&#39;])
    },
    created() {
        const pid = this.$route.query.pid
        this.loadDataAsync(keep, pid)
    }
}
</script>

Nach dem Login kopieren

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

Nach dem Login kopieren

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!