在动作中使用 Vuex 状态数据

Question

我是 Vuex 的新手。现在我已经创建了一个方法来检索所有产品并将其存储在一个对象中，我想将此数据用于不同的功能。

这是我正在使用的代码，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
            })
        }
    },
})

我想将数据存储到购物车对象中。为此，我需要检查产品是否有效，这样我需要访问产品对象，但它给我消息：app.js:86812 TypeError: Cannot read property 'products' of undefined

我是否需要将产品对象直接从视图传递到 Vuex 文件，或者有什么方法我不必这样做并且可以在 store.js 文件中使用产品对象？

Answer 1

您需要像这样解构 addToCart 方法的第一个参数：

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

在动作中使用 Vuex 状态数据

Use the Vuex state data in a action

vue.js

axios

vuex