Как добавить новые значения в объект массива, используя Vuex?

Question

Я новичок в vuex и пытаюсь сохранить объекты в массиве с именем orders, который находится в файле store.js.

Я пытаюсь сохранить значения из объекта (например,me.title) в массив, который находится в файле хранилища, нажав на кнопку, которая вызывает метод (triggerFunction), но я столкнулся с двумя проблемами:

1 - В журнале консоли я вижу, что единственноеизменяемой переменной является state.order.title, остальные остаются неопределенными (например, orders.calories)

2 - Кроме того, массив state.orders является пустым, и никакое значение не помещается в state.orders, так какзапрограммировано в мутации.

app.vue

<template>
<p class="genric-btn primary circle text-uppercase" v-on:click="triggerFunction(me.title,me.description,me.price,me.calories)">add to cart</p>
</template>

<script>
export default {
    data () {
        return {
            me:{
                title:"Hamburger",
                description:"Something here",
                price:"25",
                calories:"10"
            },
        }
  },
methods:{
   triggerFunction: function(title,description,price,calories){  
      this.$store.dispatch('triggerFunction',title,description,price,calories)
    },
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state:{
        order:{title:'',description:'',price:0,calories:0,qty:0},
        orders:[],
    },
    mutations:{
        triggerFunction: (state,title,description,price,calories) => {
            state.order.title = title,
            state.order.description = description,
            state.order.price = price,
            state.order.calories = calories
            state.order.qty = 1
            state.orders.push(state.order)
                        console.log(state.order)
                        console.log(state.orders)
        },
    },
    actions:{
        triggerFunction: (context,title,description,price,calories) => {
            context.commit('triggerFunction',title,description,price,calories)
        }
    },
})

Answer 1

1) Мутации и действия имеют 2 параметра по умолчанию. Первый - состояние магазина, второй - полезная нагрузка.

2) Хранилище не будет наблюдать изменения ключа объекта, в этом случае используйте Vue.set . Но это нормально, если переменная порядка в вашем магазине не реагирует.

3) Вы можете использовать переменные данных в компоненте, вам не нужно передавать его в качестве параметра. Если вы не используете v-for.

Вот правильный вызов действия:

<template>
    <p class="genric-btn primary circle text-uppercase" v-on:click="triggerFunction(me.title,me.description,me.price,me.calories)">add to cart</p>
</template>

<script>
export default {
    data () {
        return {
             me:{
                title:"Hamburger",
                description:"Something here",
                price:"25",
                calories:"10"
            },
        }
  },
  methods:{
      triggerFunction: function(title,description,price,calories){  
      this.$store.dispatch('triggerFunction', {
          title: title,
          description: description, 
          price: price, 
          calories: calories
      }) // or ES6 if the value name equals with the key {title,description, price, calories}
    },
}
</script>

Вот правильный магазин:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex);

export const store = new Vuex.Store({
    state:{
        order:{title:'',description:'',price:0,calories:0,qty:0},
        orders:[],
    },
    mutations:{
        triggerFunction: (state, payload) => {
            Vue.set(state.order, 'title', payload.title);
            Vue.set(state.order, 'description', payload.description);
            Vue.set(state.order, 'price', payload.price);
            Vue.set(state.order, 'calories', payload.calories);
            Vue.set(state.order, 'qty', 1);
            state.orders.push(state.order);
        },
    },
    actions:{
        triggerFunction: (context, payload) => {
            context.commit('triggerFunction', payload)
        }
    },
})