programing

VueJ - 알 수 없는 로컬 작업 유형: addProductToCart, 글로벌 유형: cart/addProductToCart

prostudy 2022. 6. 18. 09:20
반응형

VueJ - 알 수 없는 로컬 작업 유형: addProductToCart, 글로벌 유형: cart/addProductToCart

VueJs는 처음이니까 좀 봐주세요.VueJs를 사용하여 쇼핑 카트를 구현하려고 합니다.'카트에 추가' 버튼과 클릭 핸들러가 있습니다.addProductToCart(product)그러면 제품이 카트에 추가되고 버튼을 클릭하면 오류가 나타납니다.unknown local action type: addProductToCart, global type: cart/addProductToCart내가 뭘 잘못하고 있는지 모르겠어.

요소.표시하다

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

<script>
    import { mapActions } from 'vuex'

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

store/module/module.module.models

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.displays(유형).

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

제품 상태와 카트 상태가 있고 각각 다른 동작, 돌연변이 등을 하고 싶기 때문에 네임슬레이드 모듈을 사용하고 있습니다.

문제는 액션에 잘못된 서명이 있다는 것입니다.[types.ADD_PRODUCT_TO_CART].

다음 중 하나여야 합니다.

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

언급URL : https://stackoverflow.com/questions/52650090/vuejs-unknown-local-action-type-addproducttocart-global-type-cart-addproduc

반응형