CODEWITHSUNDEEP
vue.jsaxiosvuex
Sander Plomp
Sander Plomp

Reputation: 271

Use the Vuex state data in a action

I am fairly new to Vuex. Now that I have created a method to retrieve all of the products and stored it inside an object, I want to use this data for a different function.

This is the code I am working with, store.js:

import Vue from 'vue'
import Vuex from 'vuex'
 
Vue.use(Vuex)
 
export const store = new Vuex.Store({
    state: {
        products: [],
        cart: [],
        newCartItem: {},
    },
    actions: {
        products({ commit }) {
            axios.get("api/products/").then(response => {

                let products = response.data.products.map(product => {
                const totalRatings = product.product_rating.reduce((acc, { rating }) => acc += Number(rating), 0)
                const averageRating = totalRatings/product.product_rating.length
                return {...product, averageRating}
                })

                products = products.map(product => {
                const category = product.product_category.name
                return {...product, category}
                })
                commit('GET_PRODUCTS', products)
            })
        },
        cart({ commit }) {
            commit('GET_CART_ITEMS', { cart })
        },
        addToCart({ commit }, { state, product, quantity }) {
            let findProduct = state.products.find(o => o.id === product.id)
            if ( findProduct ) {
                findProduct.quantity +=1;
                findProduct.subtotal = findProduct.quantity * findProduct.price;
            } else {
                state.newCartItem.id = product.id
                state.newCartItem.name = product.name;
                state.newCartItem.price = product.price;
                state.newCartItem.quantity = product.quantity;
                state.newCartItem.image = product.product_image[0].image;
                state.newCartItem.subtotal = product.price;
                state.newCartItem.units = product.units;
                state.cartItems.push(this.newCartItem);
                state.newCartItem = {}
            }
            commit('ADD_TO_CART', { product, quantity })
        }       
    },
    getters: {
        
    },
    mutations: {
        GET_PRODUCTS(state, products) {
            state.products = products
        },
        GET_CART_ITEMS(state, cart) {
            state.cart = cart
        },
        ADD_TO_CART(product, quantity) {
            state.cart.push({ 
                product, quantity
            })
        }
    },
})

I want to store data into the cart object. In order to do so, I need to check if the product is valid, this way I need to access the products object, but it is giving me the message: app.js:86812 TypeError: Cannot read property 'products' of undefined

Do I need to pass the products object straight from the view to the Vuex file or is there a way I don't have to do this and can use the products object in the store.js file?

Upvotes: 0

Views: 147

Answers (1)

Splatbang
Splatbang

Reputation: 776

You need to destructure the first arg of your addToCart method like so:

 addToCart({ commit, state }, { product, quantity }) {...}

Upvotes: 1

Related Questions