VueJS - 未知的本地操作类型：addProductToCart，全局类型：cart/addProductToCart

Question

我对 VueJS 还很陌生，所以请放轻松。我正在尝试使用 VueJS 实现购物车。我有一个按钮“添加到购物车”，addProductToCart(product)其中包含一个单击处理程序，该处理程序应将产品添加到购物车中，当我单击该按钮时，出现错误unknown local action type: addProductToCart, global type: cart/addProductToCart。我被卡住了，我不知道我可能做错了什么。

组件.vue

<button @click="addProductToCart(product)">Add to Cart</button>

<script>
    import { mapActions } from 'vuex'

    export default {
      computed: {
        //...
      },
      methods: mapActions('cart', [
        'addProductToCart'
      ])
    }
</script>

商店/模块/cart.js

import * as types from '../types';

const state = {
  items: []
};

const getters = {
  cartProducts: (state, getters, rootState) => {
    return state.items.map(({ name, quantity }) => {
      const product = rootState.products.all.find(product => product.name === name)
      return {
        name: product.name,
        price: product.price,
        quantity
      }
    })
  },
  cartTotalPrice: (state, getters) => {
    return getters.cartProducts.reduce((total, product) => {
      return total + product.price * product.quantity
    }, 0)
  }
};

const mutations = {
  [types.PUSH_PRODUCT_TO_CART] (state, { product_name }) {
    state.items.push({
      product_name,
      quantity: 1
    })
  }
};

const actions = {
  [types.ADD_PRODUCT_TO_CART] ({ state, commit }, product) {
    commit(types.PUSH_PRODUCT_TO_CART, { name: product.name })
  }
};

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

类型.js

export const ADD_PRODUCT_TO_CART = 'cart/ADD_PRODUCT_TO_CART'
export const PUSH_PRODUCT_TO_CART = 'cart/PUSH_PRODUCT_TO_CART'

我正在使用命名空间模块，因为我有产品状态和购物车状态，并且希望为每个模块设置单独的操作、更改等。

Answer 1

问题是您的操作具有不正确的[types.ADD_PRODUCT_TO_CART].

它应该是：

const actions = {
  addProductToCart ({ state, commit }, product) {
    commit(types.PUSH_PRODUCT_TO_CART, { name: product.name })
  }
};