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

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

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

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

Vuex

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

解決済

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

sho.cat
sho.cat

総合スコア5

Vue.js

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

Vuex

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

1回答

0リアクション

0クリップ

4072閲覧

投稿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

//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>

javascript

//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

以下のような質問にはリアクションをつけましょう

  • 質問内容が明確
  • 自分も答えを知りたい
  • 質問者以外のユーザにも役立つ

リアクションが多い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

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

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

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

下記のような質問は推奨されていません。

  • 間違っている
  • 質問になっていない投稿
  • スパムや攻撃的な表現を用いた投稿

適切な質問に修正を依頼しましょう。

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

同じタグがついた質問を見る

Vue.js

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

Vuex

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