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

我是VueJS的新手，所以，请对我放松点。我正在尝试使用VueJS实现一个购物车。我有一个按钮“添加到购物车”，带有一个名为

addProductToCart（product）

的点击处理程序，该处理程序应将产品添加到购物车，当我点击该按钮时，我得到一个错误

未知的本地操作类型：addProductToCart，全局类型：Cart/addProductToCart

。我被卡住了，我不知道我可能做错了什么

组件.vue types.js

---

我使用名称空间模块，因为我有产品状态和购物车状态，并且希望每个模块都有单独的操作、突变等。

问题是您的操作的签名不正确，

[类型。将产品添加到购物车]

应该是：

const actions={
addProductToCart（{state，commit}，product）{
提交（types.PUSH_PRODUCT_TO_CART，{name:PRODUCT.name}）
}
};

当您更改

名称空间：false

时，结果是否相同？否，然后它会说

[vuex]模块名称空间未在mapActions（）中找到：cart/

您的突变在哪里？@StevenB。我已使用变体和getter更新了我的

cart.js

。该操作的签名不正确。它应该是

addProductToCart

而不是

[类型.将产品添加到购物车]

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

<script>
    import { mapActions } from 'vuex'

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

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
}

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