Vue.js Vuexで定義した関数にアクセスできません

Question

前提・実現したいこと

vuexのShopping Cart Exampleを試しています。
store/index.jsで定義した関数を実行するとエラーが出ます。
初歩的なところで躓いていそうですが、ご教授いただけますと幸いです。

発生している問題・エラーメッセージ

[Vue warn]: Unhandled error during execution of native event handler 
    at <ProductList> 
    at <Home onVnodeUnmounted=fn<onVnodeUnmounted> ref=Ref< Proxy {…} > > 
    at <RouterView> 
    at <App>
Uncaught TypeError: _ctx.toCart is not a function
    at onClick
    at callWithErrorHandling
    at callWithAsyncErrorHandling 
    at HTMLButtonElement.invoker 

該当のソースコード

//ProductList.vue

<template>
  <div class="hello">
    <ul>
      <li v-for="product in products" :key="product.id">
          {{ product.title }}
        <br />
        <button @click="toCart(product)">Add to cart</button>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  computed: {
    products() {
      return this.$store.state.products
    },
  },
  created() {
    this.$store.dispatch('getAllProducts')
  },
}
</script>

//index.js

import { createApp } from 'vue'
import { createStore } from 'vuex'
import shop from '@/api/shop.js'

export default createStore({
  state: {
    products: [],
    items: [],
  },
  mutations: {
    setProducts(state, products) {
      state.products = products
    },
    pushProductToCart(state, product) {
      state.items.push({
        id: product.id,
        quantity: 1,
      })
    },
  },
  actions: {
    getAllProducts({ commit }) {
      shop.getProducts((products) => {
        commit('setProducts', products)
      })
    },
    toCart({ commit }, product) {
      commit('pushProductToCart', product)
    },
  },
  getters: {
    cartProducts: (state) => {
      return state.items.map((item) => {
        const product = state.products.find((product) => product.id === item.id)
        return {
          title: product.title,
          price: product.price,
          quantity: item.quantity,
        }
      })
    },
  },
  modules: {},
})

const app = createApp({})

app.use(createApp)

補足情報（FW/ツールのバージョンなど）

Vue.js 3.00 vuex 4.00

Answer 1

toCartはストアのactionなので、$store.dispatchで呼び出す必要があります。

<button @click="$store.dispatch('toCart', product)">Add to cart</button>

Comments

[sho.cat]

ご返信ありがとうございます。
申し訳ありません。この表記だけだと、全く同じエラーが出ます。

[Masa-Shin]

すみません、書き方が少し違っていたため修正しました。こちらではいかがでしょうか。

[sho.cat]

ありがとうございます。おかげで関数を実行することができました。