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

Question

前提

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の関数名を, 動的に定義しているため、なんらかの影響が発生しているかもしれません。

該当のソースコード

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
    })]
})

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

Answer 1

解決済。取るに足らないミスでした