Zenn
😇

Vue2/Vuex3からVue3/Vuex4にする際にハマった話

2023/08/30に公開
Vue.js
Vuex
Vue 3
Vue 2
tech

Vue2/Vuex3からVue3/Vuex4に移行するなかで @vue/compat を利用して徐々に移行しようと思っていた

Vuex4自体は new Store(...) 構文がまだ利用できるとのことなので app.use(store) は利用しなくても動くかなと思っていたらダメだった
https://vuex.vuejs.org/ja/guide/migrating-to-4-0-from-3-x.html

Vue2/Vuex3 でのサンプルコード

main.js
import Vue from 'vue'
import Counter from './Counter.vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(Counter)
})
store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  // 省略
}

const mutations = {
  // 省略
}

const actions = {
  // 省略
}

const getters = {
  // 省略
}

export default new Vuex.Store({
  state,
  getters,
  actions,
  mutations
})

Vue3/Vuex4 with @vue/compat でうまくいった例

store.jsは変えなくても動作する

main.js
import { createApp } from 'vue'
import Counter from './Counter.vue'
import store from './store'

createApp({
  render: h => h(Counter)
}).use(store).mount('#app')

Vue3/Vuex4 with @vue/compat でダメな例

new Vue の記法自体は @vue/compat で互換モードなのでそれ単体では動作するがstoreがからむと下記のようなエラーとなった

Uncaught TypeError: _ctx.$store is undefined

Vue2/Vuex3 でのサンプルコードのmain.jsのままであったり、下記のコードだとダメで createApp 記法にする必要があった

main.js
new Vue({
  el: '#app',
  render: h => h(Counter)
}).use(store)

Discussion