🧏‍♀️

NuxtBridge CompositionAPI書き換えまとめ(だいたい完成)

2022/09/19に公開約4,600字

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

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: "/〇〇" }
      ]);

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: "",
});

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");
};

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;
});

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,
  });
};

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}`;
    }
  }
});

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では対応していないぞ!

Discussion

ログインするとコメントできます