はじめに
ポートフォリオサイトをVue2からVue3へ移行する で移行したのだが、CompositionAPIへ変更をしたので記事にする。
変更ポイント
すべての変更は下記↓
https://github.com/katsuobushiFPGA/portfolio-vue3/pull/3
script を script setupに変更する
<script></script>で囲んでいた箇所を
<script setup></script>とした。
これを利用することで、 setup の関数を省略できるので使う。
data を refに変更する
data としてリアクティブな変数を定義していたのだが、Vue3のCompositionAPIでは、 refかreactiveを使うことになる。
今回は、refを使う。
※注意点として、refで定義した変数にはvalueでアクセスすることになる
this.$router を useRouterにする
this.$router で routeにアクセスしていたが、vue-routerのuseRouterを使用する。
それに伴い変更をした。
computedの定義を変更する
const activeTitle = computed(() => {
const item = items.value.find(item => {
return item.name === router.currentRoute.value.name
})
return item?.title
})例えばこんな感じになる。
以前は、
computed: {
activeTitle() {
const item = this.items.find(item => {
return item.name === this.$route.name
})
return item.title
}
},みたいな感じであった。
import時のファイル参照に @ を使用する
下記のようなもの。
<script setup>
import Default from './layouts/default/Default.vue';
</script>が
<script setup>
import Default from '@/layouts/default/Default.vue';
</script>になる。
※Vue3のCompositionAPI特有の機能ではない。
おわりに
放置していたリファクタリングを今回実施した。Vue3+Viteなど、エコシステムをもっと勉強していきたいので、暇になったらポートフォリオサイトを改造したい。
