はじめに

ポートフォリオサイトをVue2からVue3へ移行する で移行したのだが、CompositionAPIへ変更をしたので記事にする。

変更ポイント

すべての変更は下記↓
https://github.com/katsuobushiFPGA/portfolio-vue3/pull/3

script を script setupに変更する

1

<script></script>

で囲んでいた箇所を

1

<script setup></script>

とした。
これを利用することで、 setup の関数を省略できるので使う。

data を refに変更する

data としてリアクティブな変数を定義していたのだが、Vue3のCompositionAPIでは、 refかreactiveを使うことになる。
今回は、refを使う。
※注意点として、refで定義した変数にはvalueでアクセスすることになる

this.$router を useRouterにする

this.$router で routeにアクセスしていたが、vue-routerのuseRouterを使用する。
それに伴い変更をした。

computedの定義を変更する

1
2
3
4
5
6

const activeTitle = computed(() => {
  const item = items.value.find(item => {
    return item.name === router.currentRoute.value.name
  })
  return item?.title
})

例えばこんな感じになる。
以前は、

1
2
3
4
5
6
7
8

computed: {
  activeTitle() {
    const item = this.items.find(item => {
      return item.name === this.$route.name
    })
    return item.title
  }
},

みたいな感じであった。

import時のファイル参照に @ を使用する

下記のようなもの。

1
2
3

<script setup>
  import Default from './layouts/default/Default.vue';
</script>

が

1
2
3

<script setup>
  import Default from '@/layouts/default/Default.vue';
</script>

になる。
※Vue3のCompositionAPI特有の機能ではない。

おわりに

放置していたリファクタリングを今回実施した。
Vue3+Viteなど、エコシステムをもっと勉強していきたいので、暇になったらポートフォリオサイトを改造したい。