ﾉﾘｰｰｰﾝ’s Blog

みんな大好きmaterial design icon(マテリアルアイコン) をVue3とViteの環境で使ってみたので、その備忘録。

Vite .config.jsに追記するのかと思っていたら、不要でした。
やり方は全部こちらに書いてありますが、一応。

https://www.npmjs.com/package/vue-material-design-icons

アイコンはこちらから探せます。

https://materialdesignicons.com/

インストール

npm i vue-material-design-icons

yarnの場合

yarn add vue-material-design-icons

インポート

import MenuIcon from 'vue-material-design-icons/Menu.vue';

components: {
  MenuIcon;
}

グローバルの場合

import MenuIcon from 'vue-material-design-icons/Menu.vue';

Vue.component('menu-icon', MenuIcon);

描画

<menu-icon />

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 use method accept one plugin as first parameter and options (which si optional) as second one app.use(plugin, itsOptions), 

Vuex Cannot read property ‘state’ of undefined

ちなみに全部.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は一緒に入れても問題ないようでしたが、気持ち悪いので分けました。