Получатели массива Vuex не срабатывали при изменении состояния? Nuxt - PullRequest
Новая
       16

Получатели массива Vuex не срабатывали при изменении состояния? Nuxt

0 голосов
/ 21 октября 2019

Моя проблема в том, что всякий раз, когда изменяется состояние, геттеры не меняются вообще. Я предполагаю, что из-за геттеров не удалось обнаружить изменения в массиве?

Код Vuex 

// State - Basic data for the cart
export const state = () => ({
  cart: [{ _id: 1, price: 1000} , {_id: 2, price: 2000 } , { _id: 3, price: 222}],
});

//Mutations - Find the product with same id and change the price
export const mutations = () = ({
    changePrice(state, { id, newPrice }) {
    const cartProduct = state.cart.find(item => item._id === id);
    cartProduct.price = newPrice
    }
})

// Getters - Get all price and combine it so - 1000 + 2000 + 222 = 3222
export const getters = {
 cartTotalPrice(state) {
     return state.cart.reduce((total, product) => {
       return total + product.price;
     }, 0);
  },
}

Price.vue 

<template>
   <!-- Basic input with type number and button to do an action -->
   <div>
       <input type="number" v-model="price" />
       <button @click="onChangePrice">
       <h3>{{ cartTotalPrice }}</h3>
  </div>
</template>
<script>
  export default {
     data() {
        return { price: 0 }
     }

     computed: {
        ...mapGetters(['cartTotalPrice'])
     },
     methods: {
       onChangePrice() {
           this.$store.commit('changePrice', {_id: 1, newPrice: this.price });
       }

     }
  }

</script>

Любые предложения о том, как продолжать получать реактивные геттеры, я должен заменить массив?

1 Ответ

0 голосов
/ 22 октября 2019

Я вижу две ошибки.

Это: 

this.$store.commit('changePrice', {1, this.price });

должно быть так: 

this.$store.commit('changePrice', { id: 1, newPrice: this.price });

Вторая проблема - определение mutations:

export const mutations = (state, { id, newPrice }) = ({
    changePrice() {

Я действительно не знаю, что там происходит, но я предполагаю, что вы имели в виду что-то вроде этого: 

export const mutations = {
    changePrice(state, { id, newPrice }) {
...