vuex のモジュール化と名前空間のコード例-jsチュートリアル-php.cn

vuex のモジュール化と名前空間のコード例

不言

リリース： 2018-08-07 15:02:22

オリジナル

2895 人が閲覧しました

この記事では、vuex のモジュール化と名前空間に関するサンプルコードを紹介します。必要な方は参考にしていただければ幸いです。

Vuex ストアはグローバルに登録されているため、ビジネス状態とメソッドを分離するモジュールを導入し、異なるモジュールでの名前の競合 (ゲッター、ミューテーション、アクション) の問題を解決する名前空間を導入します。 /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
}

ログイン後にコピー

./store/index.js モジュール

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

ログイン後にコピー

をランチャー (main.js) に登録します。ルートコンポーネント

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

ログイン後にコピー

ページコンポーネント (./components/sample.vue) で

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

ログイン後にコピー

を宣言して呼び出します。mapMutations、mapGetters、mapActions、を混在させるにはオブジェクト展開演算子を使用することをお勧めします。このページはインタラクティブなエクスペリエンスのみを目的としています。あまり多くのビジネスロジックとステータスを混在させないでください。

createNamespacedHelpers を通じて名前空間にマッピングされます。

プロジェクト構造:

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

ログイン後にコピー