質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

Q&A

解決済

1回答

6876閲覧

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

sho.cat

総合スコア5

Vue.js

Vue.jsは、Webアプリケーションのインターフェースを構築するためのオープンソースJavaScriptフレームワークです。

Vuex

Vuexは、Vue.js アプリケーションのための状態管理ライブラリです。アプリケーション内で使用するコンポーネントのための集中データストアを提供。コンポーネント同士でデータをやり取りし、処理のフローを一貫させたり、データの見通しを良くすることができます。

0グッド

0クリップ

投稿2021/08/06 09:48

編集2021/08/06 09:50

前提・実現したいこと

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

該当のソースコード

vue

1//ProductList.vue 2 3<template> 4 <div class="hello"> 5 <ul> 6 <li v-for="product in products" :key="product.id"> 7 {{ product.title }} 8 <br /> 9 <button @click="toCart(product)">Add to cart</button> 10 </li> 11 </ul> 12 </div> 13</template> 14 15<script> 16export default { 17 computed: { 18 products() { 19 return this.$store.state.products 20 }, 21 }, 22 created() { 23 this.$store.dispatch('getAllProducts') 24 }, 25} 26</script> 27

javascript

1//index.js 2 3import { createApp } from 'vue' 4import { createStore } from 'vuex' 5import shop from '@/api/shop.js' 6 7export default createStore({ 8 state: { 9 products: [], 10 items: [], 11 }, 12 mutations: { 13 setProducts(state, products) { 14 state.products = products 15 }, 16 pushProductToCart(state, product) { 17 state.items.push({ 18 id: product.id, 19 quantity: 1, 20 }) 21 }, 22 }, 23 actions: { 24 getAllProducts({ commit }) { 25 shop.getProducts((products) => { 26 commit('setProducts', products) 27 }) 28 }, 29 toCart({ commit }, product) { 30 commit('pushProductToCart', product) 31 }, 32 }, 33 getters: { 34 cartProducts: (state) => { 35 return state.items.map((item) => { 36 const product = state.products.find((product) => product.id === item.id) 37 return { 38 title: product.title, 39 price: product.price, 40 quantity: item.quantity, 41 } 42 }) 43 }, 44 }, 45 modules: {}, 46}) 47 48const app = createApp({}) 49 50app.use(createApp)

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

Vue.js 3.00 vuex 4.00

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

html

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

投稿2021/08/07 05:26

編集2021/08/07 09:52
Masa-Shin

総合スコア269

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

sho.cat

2021/08/07 08:28

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

2021/08/07 10:06 編集

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

2021/08/07 12:22

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問