如何使用 Vuex 向数组对象添加新值？

Question

我是 vuex 的新手，我正在尝试将对象存储到一个名为 orders 的数组中，该数组位于 store.js 文件中。

我尝试通过单击触发方法（triggerFunction）的按钮将对象（例如 me.title）中的值存储到存储文件中的数组中，但我遇到了两个问题：

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 个默认参数。第一个是 store 的 state，第二个是 payload。

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)
        }
    },
})