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

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

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

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

解決済

store.dispatch実行後のエラー "[vuex] expects string as the type, but found object." について

yochy0220
yochy0220

総合スコア10

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

1回答

0リアクション

0クリップ

183閲覧

投稿2022/09/14 03:43

編集2022/09/14 03:50

前提

Vue2(Options API)の参考書に載っているアプリケーションを参考にしながら, Vue3の<script setup>で書き換えを行っています。

実現したいこと

コンポーネントのscript setup内で, Vuex store内のActionsを呼び出したい。今回のactionの処理は, mutationを呼び出すだけの処理 。

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

[vuex] expects string as the type, but found object.

store.dispatchにて, payloadとしてオブジェクトを渡すことを意図しています。
mutation, actionの関数名を, 動的に定義しているため、なんらかの影響が発生しているかもしれません。

該当のソースコード

store.js

import { createStore } from "vuex" import createPersistedState from "vuex-persistedstate"; import { UPDATE_BOOK, UPDATE_CURRENT } from "../mutation-types"; const state = { books: [], current: null } const getters = { booksCount( state ) { return state.books.length }, allBooks( state ) { return state.books }, getRangeByPage( state ) { return page => { const SIZE = 3 return state.books.slice((page-1) * SIZE, (page-1) * SIZE + SIZE) } }, getBookById(state) { return id => { state.books.find( book => book.id === id ) } }, current(state) { return state.current } } const mutations = { [UPDATE_CURRENT]( state, payload ) { state.current = payload }, [UPDATE_BOOK]( state, payload ) { let b = getters.getBookById(payload.id) if (b) { // assignメソッドで更新しなければ, 変更が検知されない Object.assign(b, payload) } else { state.books.push(payload) } } } const actions = { // {commit} = context.commitを分割代入 [UPDATE_CURRENT]( {commit}, payload ) { commit(UPDATE_CURRENT, payload) }, [UPDATE_BOOK]( {commit}, payload ) { commit(UPDATE_BOOK, payload) } } export default createStore({ state, getters, mutations, actions, strict: true, plugins: [createPersistedState({ key: 'reading-recorder', storage: localStorage })] })

BookInfo.vue

<template> ...省略 </template> <script setup> import { defineProps } from 'vue'; import { useRouter } from 'vue-router' import { useStore } from 'vuex'; import { UPDATE_CURRENT } from '../mutation-types'; const router = useRouter() const store = useStore() const props = defineProps({ index: Number, linkable: { type: Boolean, default: false }, book: Object }) const onclick = () => { if ( props.linkable ) { store.dispatch([UPDATE_CURRENT], props.book) router.push('/form') } } // export default { // name: 'book-info', // props: { // index: { type: Number }, // linkable: { type: Boolean, default: false }, // book: { type: Object } // }, // methods: { // ...mapActions([UPDATE_CURRENT]), // onclick() { // if (this.linkable) { // this[UPDATE_CURRENT](this.book) // this.$router.push('/form') // } // } // } // } </script>

templateタグ内は, 特に問題はないと思います。コメントアウトしている部分は, 参考書に記載されているVue2での構文です。その中で, method内での, "this[UPDATE_CURRENT](this.book)"の部分を, script setup構文内の"onclick()"内で再現したいと考えています。

試したこと

静的な関数定義では, 動作確認済みです。

バージョン

node.js v16.17.0
npm v8.15.0
"vite": "^3.1.0"
"vue": "^3.2.37"
"vue-router": "^4.1.5"
"vuex": "^4.0.2"
"vuex-persistedstate": "^4.1.0"

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

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

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

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

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

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

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

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

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

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

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

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

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

ただいまの回答率
86.12%

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

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

質問する

関連した質問

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

Vue.js

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。