I'm new to using vuex and I am attempting to save objects into an array called orders within the store.js file.
My goal is to extract values from an object (such as me.title) and save them into an array within the store file by clicking on a button that triggers the triggerFunction method. However, I have encountered two issues:
1 - When checking the console log, I noticed that only the state.order.title variable is being updated while the others remain undefined (e.g., orders.calories).
2 - Additionally, the state.orders array is empty and no value is being pushed into it as expected by the mutation function.
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)
}
},
})