Vue3 + viteでvuexの設定をいじっている時に、エラーが出たのでその備忘録。
エラー文
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘state’)
↑を解決した後に、
Uncaught RangeError: Maximum call stack size exceeded
という別のエラーが出ました。一難去ってまた一難。
結論から言うと、main.jsのcreateApp(App).use()のチェーンの仕方が悪かったようです。
バージョン
- MacOS
npm list
├── @vitejs/plugin-vue@3.2.0
├── axios@1.1.3
├── node-sass@7.0.3
├── sass-loader@10.3.1
├── sass@1.55.0
├── vite@3.2.1
├── vue-axios@3.5.2
├── vue-router@4.1.6
├── vue@3.2.41
└── vuex@4.0.2
エラーの出たコード01
.useで使うプラグインを全て1つの()に入れ、コンマで区切っています。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
createApp(App).use(router, store, VueAxios, axios).mount('#app')
この際に出たエラー文
Home.vue:5 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'state')
at Proxy._sfc_render (Home.vue:5:20)
at renderComponentRoot (runtime-core.esm-bundler.js:898:44)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5631:57)
at ReactiveEffect.run (reactivity.esm-bundler.js:187:25)
at instance.update (runtime-core.esm-bundler.js:5745:56)
at setupRenderEffect (runtime-core.esm-bundler.js:5759:9)
at mountComponent (runtime-core.esm-bundler.js:5541:9)
at processComponent (runtime-core.esm-bundler.js:5499:17)
at patch (runtime-core.esm-bundler.js:5101:21)
at ReactiveEffect.componentUpdateFn [as fn] (runtime-core.esm-bundler.js:5711:17)
stateがどうこう言われているので、一旦routerとstoreを引き離してみる。
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
import store from './store'
import axios from 'axios'
import VueAxios from 'vue-axios'
createApp(App).use(router).use(store, VueAxios, axios).mount('#app')
これでエラーは消えます。
stackoverflowの回答者によれば、.useの引数は1番目は1つのみで、2番目以降はおまとめできるとのことでした。
the
Vuex Cannot read property ‘state’ of undefineduse
method accept one plugin as first parameter and options (which si optional) as second oneapp.use(plugin, itsOptions)
,
ちなみに全部.use()のチェーンを分けて記載すると、別のエラーが出ました。
Uncaught RangeError: Maximum call stack size exceeded
at isPlainObject (utils.js:129:23)
at assignValue (utils.js:287:9)
at forEach (utils.js:261:10)
at merge (utils.js:299:21)
at assignValue (utils.js:290:21)
at forEach (utils.js:261:10)
at merge (utils.js:299:21)
at assignValue (utils.js:290:21)
at forEach (utils.js:261:10)
at merge (utils.js:299:21)
実験してみると、2つ目のエラーは分けたことが原因なのではなく、VueAxios, axios
の順番で読み込まないといけないということだったみたいです。
NG
createApp(App).use(router).use(store).use(axios).use(VueAxios).mount('#app')
NG
createApp(App).use(router).use(store).use(axios, VueAxios).mount('#app')
OK
createApp(App).use(router).use(store).use(VueAxios, axios).mount('#app')
axiosとstoreは一緒に入れても問題ないようでしたが、気持ち悪いので分けました。