Каков правильный способ использования компонентных реквизитов в приемнике Vuex?

Question

Предположим, у вас есть простой компонент приложения с кнопкой для добавления нескольких счетчиков из компонента счетчика с помощью хранилища vuex.

Here is the whole thing on webpackbin.

Немного как базовый пример счетчика с vuex git repo .Но вы хотите использовать vuex поглотитель с идентификатором, который передан через свойство на компоненте, как бы вы сделали это?

Геттер должен быть чистой функцией, поэтому вы не можете использовать this.counterId. Официальные документы говорят, что вы должны использовать вычисленное свойство, но это тоже не работает. Этот код возвращает неопределенный для получателя:

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