Как правильно получить доступ к записи с помощью динамических ключей в Vuex

#javascript #vue.js #vuex

Вопрос:

введите описание изображения здесь

Я пытаюсь запросить массив в Vuex хранилище, где product_id равен динамическому значению, как в приведенном ниже коде, но он возвращает неопределенное значение.

 const store = new Vuex.Store({
    state: {
        products: {}, 
    },
    getters: {
        getProductById:(state) => (id) => {
        return state.products.find(product => product.data.product_id == id)
       },
    }
}
 

В component.vue

 <template>
  <div> {{price}}</div>
</template>

<script>
  export default {
    name: 'someName',
    //props: ['orders'],
    data(){
        return{
           price: '',
        }
    },

    mounted(){
        this.price = this.$store.getters.getProductByProductId(1)
    }
  }
</script>
 

Ответ №1:

Используйте вычисляемое свойство, которое возвращает функцию с id параметром as, возвращающим геттер :

 <template>
  <div> {{price}}</div>
</template>

<script>
  export default {
    name: 'someName',
    //props: ['orders'],
    data(){
        return{
           price: '',
        }
    },
   computed:{
      productById(){
       return (id)=>this.$store.getters.getProductByProductId(id)
     }
   },
    mounted(){
        this.price = productById(1).price
    }
  }
</script>