動的に作成されたコンポーネントのためのvuexストアを分離する

Question

これは私が少しでも立ち往生していた問題でした。残念ながら、私はここで回答を見つけることができませんでした（質問も助けなかった）。だから、いくつかの研究をして、ここでそこに尋ねると、私はこの問題の解決策を得ているようです。

あなたはすでに答えを知っている質問を持っている、とあなた は（自分を含む）他の人 が後でそれを見つけることができるように公共の場でその知識を文書化したい場合。

もちろん、私の答えは理想的なものではないかもしれません。さらに、私はそれが重要であることを知っています。

例ではアクションを使用していません。アイデアは同じです。

の問題を述べから始めましょう：

は動的Helloという名前のローカルコンポーネントを生成する我々はApp.vueを持っている想像してみてください。

<template> 
    <div id="app"> 
    <div> 
     <hello v-for="i in jobs" :key="i" :id="i"></hello> 
     <button @click="addJob">New</button> 
    </div> 
    </div> 
</template> 

<script> 
import Hello from './components/Hello' 

export default { 
    components: { 
    Hello 
    }... 

store.js

export const store = new Vuex.Store({ 
    state: { 
    jobs: [] 
    } 
}) 

我々は、アレイjobsを反復することによって成分を生成するv-forディレクティブを使用しています。私たちのstoreは今のところstateだけが空の配列で構成されています。 は、1）jobsに要素を追加し、他の言葉で新しいコンポーネントHelloを作成し（それはkeyと<hello>のidとして割り当てられることになるだろうされている番号）、もしましょう、そして、地元のコンポーネントに渡さ：2つのことを行う必要があります ボタンNewprops。 2）は、ローカルストアを生成します。モジュール - 新しく作成されたコンポーネントにスコープされたデータを保持します。 NEWボタンの第1の動作について

Answer 1

： -

Hello.vue

<template> 
    <div> 
    <input type="number" :value="count"> 
    <button @click="updateCountPlus">+1</button> 
    </div> 
</template> 

export default { 
    props: ['id'] 
} 

シンプルな部品1

私たちの目標を追加ボタンでの入力は、このような何かを設計することです - 生成コンポーネント -私たちのstore.js

mutations: { 
    addJob (state) { 
     state.jobs.push(state.jobs.length + 1) 
... 
} 

第二のは、はローカルモジュールを作成します。ここでは、reusableModuleを使用して、モジュールの複数のインスタンスを生成します。そのモジュールはわかりやすいように別々のファイルに保存されています。また、は、モジュール状態を宣言するための関数の使用に注意してください。

const state =() => { 
    return { 
    count: 0 
    } 
} 

const getters = { 
    count: (state) => state.count 
} 

const mutations = { 
    updateCountPlus (state) { 
    state.count++ 
    } 
} 

export default { 
    state, 
    getters, 
    mutations 
} 

reusableModuleを使用するには、インポートして動的モジュール登録を適用します。

store.js

import module from './reusableModule' 

const {state: stateModule, getters, mutations} = module 

export const store = new Vuex.Store({ 
    state: { 
    jobs: [] 
    }, 
    mutations: { 
    addJob (state) { 
     state.jobs.push(state.jobs.length + 1) 
     store.registerModule(`module${state.jobs.length}`, { 
     state: stateModule, 
     getters, 
     mutations, 
     namespaced: true // making our module reusable 
     }) 
    } 
    } 
}) 

我々はそのストレージにHello.vueリンクするつもりだ、後。 state、getters、mutations、actions、vuexが必要な場合があります。ストレージにアクセスするには、gettersを作成する必要があります。 mutationsと同じです。

Home.vue

<script> 

export default { 
    props: ['id'], 
    computed: { 
    count() { 
     return this.$store.getters[`module${this.id}/count`] 
    } 
    }, 
    methods: { 
    updateCountPlus() { 
     this.$store.commit(`module${this.id}/updateCountPlus`) 
    } 
    } 
} 
</script> 

我々はgetters、mutationsとactionsの多くを持っている想像してみてください。なぜ{mapGetters}または{mapMutations}を使用しないのですか？いくつかのモジュールがあり、必要なモジュールへのパスを知っていれば、それを行うことができます。残念ながら、モジュール名にアクセスすることはできません。

コードは、コンポーネントのモジュールが実行されたときに実行されます（あなたのアプリ が起動している）、コンポーネントが作成されていないとき。したがって、これらのヘルパーは を事前にモジュール名を知っている場合にのみ使用できます。

ここではほとんど役に立ちません。 gettersとmutationsを分離してオブジェクトとしてインポートし、きれいに保つことができます。

<script> 
import computed from '../store/moduleGetters' 
import methods from '../store/moduleMutations' 

export default { 
    props: ['id'], 
    computed, 
    methods 
} 
</script> 

Appコンポーネントに戻ってください。 mutationをコミットしてAppにgetterを作成する必要があります。モジュールに配置されたデータにどのようにアクセスできるかを示す。

store.js

export const store = new Vuex.Store({ 
    state: { 
    jobs: [] 
    }, 
    getters: { 
    jobs: state => state.jobs, 
    sumAll (state, getters) { 
     let s = 0 
     for (let i = 1; i <= state.jobs.length; i++) { 
     s += getters[`module${i}/count`] 
     } 
     return s 
    } 
    } 
... 

Appコンポーネントのコードを仕上げ

<script> 
import Hello from './components/Hello' 
import {mapMutations, mapGetters} from 'vuex' 

    export default { 
     components: { 
     Hello 
     }, 
     computed: { 
     ...mapGetters([ 
      'jobs', 
      'sumAll' 
     ]) 
     }, 
     methods: { 
     ...mapMutations([ 
      'addJob' 
     ]) 
     } 
    } 
    </script>