Vuexゲッターでコンポーネントの小道具を使用する正しい方法は何ですか？

Question

vuexストアを使用してカウンタコンポーネントから複数のカウンタを追加するボタン付きの単純なアプリケーションコンポーネントがあるとします。

Here is the whole thing on webpackbin.

は、コンポーネントのプロパティを経由して渡されるIDとvuexゲッターを使用したい.But vuex git repoから基本的な反例のようなビット、あなたがそれをどのように行うのでしょうか？

getterは純粋な関数でなければならないので、this.counterIdは使用できません。公式の文書では、計算されたプロパティを使用する必要があると言われていますが、それはどちらも機能しないようです。このコードは、getterに対して未定義を返します。

import * as actions from './actions' 

export default { 
    props: ['counterId'], 
    vuex: { 
     getters: { 
      count: state => state.counters[getId] 
     }, 
     actions: actions 
    }, 
    computed: { 
     getId() { return this.counterId } 
    }, 
} 

Answer 1

ゲッターはコンポーネントの状態に依存しない純粋な関数でなければなりません。

あなたはまだクレートゲッターから計算された小道具、または直接ストアを使用することができます。

//option A 
export default { 
    props: ['counterId'], 
    vuex: { 
     getters: { 
      counters: state => state.counters 
     }, 
     actions: actions 
    }, 
    computed: { 
     currentCounter() { return this.counters[this.counterId] } 
    }, 
} 

//option B (better suited for this simple scenario) 
import store from '../store' 
computed: { 
    currentCounter() { 
    return store.state.counters[this.counterId] 
    } 
}