NuxtBridge　CompositionAPI書き換えまとめ（だいたい完成）

compositionAPIに書き換えの順番（上から）をまとめておきます。
（備忘録。みなさんの環境では異なると思います。あくまでわたしたちの環境ではこうしてるというか。）

10/5追記あり、詳細はmounted参照

data

〇〇.vue

data() {
    return {
      XX: [
        { text: "A", to: "/" },
        { text: " B", to: "/〇〇" }
      ]
    };
  }

これを書き換えるのに、

〇〇.vue

import {ref} from "vue";
...
const XX = ref([
        { text: "A", to: "/" },
        { text: " B", to: "/〇〇" }
      ]);

refとreactiveがあるけど、refで動いてるからこれで書いちゃってる。ホントのところは、どう違うかはこれからちゃんと調べないといけない。

props

〇〇.vue

 props: {
    item: {
      type: Object,
      default: () => { },
    },
    title: {
      type: String,
      default: ""
    },
  },

これを書き換えるのに、

〇〇.vue

type Props = {
  item: any;
  title: string;
};
const props = withDefaults(defineProps<Props>(), {
  item: () => {},
  title: "",
});

正直 const propsの方、なにが起こってるかなんもわからん

emits

〇〇.vue

 methods: {
    accept() {
      this.$emit("accept");
    },
    deny() {
      this.$emit("deny");
    },
  },

これを書き換えるのに、

〇〇.vue

const emits = defineEmits<{
  (e: "accept"): void;
  (e: "deny"): void;
}>();

const accept = () => {
  emits("accept");
};
const deny = () => {
  emits("deny");
};

正直 const emitsのカッコになにがおこってるかわからん（またか）

mounted

〇〇.vue

 async mounted() {
    this.loading = true;
    this.courseId = this.$route.query.id;
    this.userId = this.$store.state.user.uid;
    const res = await this.$db.getChapterPageInfo(this.userId,this.courseId);
・・・
      this.breadcrumb = [
        { text: "ホーム", to: "/" },
        { text: this.course.title, to: "" },
      ];
    }
    if (this.$route.hash) {
      this.hash = this.$route.hash;
      this.$router.push(`/chapter?id=${this.$route.query.id}`);
      await setTimeout(() => {
        this.$router.push(`/chapter?id=${this.$route.query.id}${this.hash}`);
      }, 500);
    }
...
    this.loading = false;
  },

これを書き換えるのに、

〇〇.vue

import { onMounted } from "vue";
import { useRouter, useRoute } from "@nuxt/bridge/dist/runtime";
const route = useRoute();
const router = useRouter();
...
onMounted(async () => {
  loading.value = true;
  courseId.value = route.query.id;
  userId.value = $store.state.user.uid;
   const res = await db.getChapterPageInfo(userId.value, courseId.value);
・・・
    breadcrumb.value = [
      { text: "ホーム", to: "/" },
      { text: course.value.title, to: "" },
    ];
  }
  if (route.hash) {
    const hash = route.hash;
    router.push(`/chapter?id=${route.query.id}`);
    await setTimeout(() => {
      router.push(`/chapter?id=${route.query.id}${hash}`);
    }, 500);
  }
・・・
  loading.value = false;
});

$ｄｂはNuxtBridgeでは無理で、pluginsのほうもよしなに書き換えなければいけないんだが、そのへんは別記事にするかも知れない。
$routeも同様
dataを使うとき、this.は無理で.valueを使うのだけど、たとえば course.value.title　とか位置を間違えて全部書き直したので気をつけること。

10/5 追記
なんか、
import { useRouter, useRoute } from "@nuxt/bridge/dist/runtime";
が機能しなくなっていた。なんでや。
さんざん調べ上げた結果、
公式に書いてあったけど、もうimportなくてもいいみたい。
なんや、進化したんかなあ…

ご参考
https://v3.nuxtjs.org/bridge/bridge-composition-api/#userouter-and-useroute

methods

〇〇.vue

  methods: {
 async toggleWatchAgain() {
      this.$set(this.movie.log, "watchAgain", !this.movie.log.watchAgain);
      const { status } = await this.updateLog(this.movie.log.id, {
        watchAgain: !this.movie.log.watchAgain
      });
  }

これを書き換えるのに、

〇〇.vue

import { useNuxtApp } from "@nuxt/bridge/dist/runtime";
const { $set } = useNuxtApp();

const toggleWatchAgain = async () => {
  $set(movie.value.log, "watchAgain", !movie.value.log.watchAgain);
  const { status } = await updateLog(movie.value.log.id, {
    watchAgain: movie.value.log.watchAgain,
  });
};

methodsはただの関数なので書き換え後のほうが直感的です。

computed

〇〇.vue

computed: {
    classes() {
      const savedContentIndex = this.$store.getters.getLearningContentIndex;
      for (let i = 0; i <= 7; i++) {
        if (savedContentIndex === i) {
          return `learning-content-index-0${i}`;
        }
      }
    },
  },

これを書き換えるのに、

〇〇.vue

import { computed } from "vue";
import { useNuxtApp } from "@nuxt/bridge/dist/runtime";
const { $store } = useNuxtApp();
...
const classes = computed(() => {
  const savedContentIndex = $store.getters.getLearningContentIndex;
  for (let i = 0; i <= 7; i++) {
    if (savedContentIndex === i) {
      return `learning-content-index-0${i}`;
    }
  }
});

computedは値、ていうのを意識したらわかりやすくなりました

watch

〇〇.vue

  watch: {
    "$route.query.id": async function (newVal, oldVal) {
      if (newVal != oldVal) {
        location.reload();
      }
    },
  },

これを書き換えるのに、

〇〇.vue

import { watch } from "vue";
watch(
  () => route.query.id,
  async function (newVal, oldVal) {
    if (newVal != oldVal) {
      location.reload();
    }
  }
);

お師匠に全面的に助けてもらった。なんでなんだ。

その他参照ポイント

route,router

mounted参照

layoutは

NuxtBridgeでは対応していないぞ！