Question

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

我尝试通过单击触发方法的按钮（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个默认参数。首先是商店的状态，其次是有效负载。

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

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

1 个答案: