VueJS - неизвестный локальный тип действия: addProductToCart, глобальный тип: cart / addProductToCart

Question

Я довольно новичок в VueJS, поэтому, пожалуйста, будьте осторожны со мной.Я пытаюсь реализовать корзину с помощью VueJS.У меня есть кнопка «Добавить в корзину» с обработчиком кликов под названием addProductToCart(product), который должен добавить товар в корзину, и когда я нажимаю кнопку, я получаю ошибку unknown local action type: addProductToCart, global type: cart/addProductToCart.Я застрял, я не знаю, что я могу делать неправильно.

Component.vue

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

<script>
    import { mapActions } from 'vuex'

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

store / modules / 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
}

types.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 })
  }
};