Vue: Composition APIに移行

[syuilo]

Summary

Options APiを使うメリットがない

[EbiseLutica]

フォークでいくつかComposition APIに移行してるので行き詰まったところをば。

AutoComplete

this.$vm が存在しないので、第二引数にわたすものに困る。オートコンプリートの対象であるモデルを含むreactiveオブジェクトを渡すと良い

またあったら共有します

[tamaina]

globalProperties($store, $t, $tsなど)はそれぞれのエクスポートからのインポートに書き換えたほうがいいのかも？

[syuilo]

yes globalなプロパティはCompositionAPIに移行でき次第廃止する

[tamaina]

Before

<template>
<div>{{ $store.state.hoge }}</div>
</template>

Afetr

<template>
<div>{{ defaultStore.state.hoge }}</div>
</template>

<script setup>
import { defaultStore } from '@/store';
</script>
<!-- OR -->
<script>
import { defineComponent } from 'vue';
import { defaultStore } from '@/store';

export default defineComponent({
    setup() {
        return {
            defaultStore,
        }
    }
});
</script>

[syuilo]

ちなみにstoreに関してはプロパティアクセス自体廃止しそう https://github.com/misskey-dev/misskey/issues/8120

Before

<template>
<div>{{ $store.state.hoge }}</div>
</template>

Afetr

<template>
<div>{{ hoge }}</div>
</template>

<script setup>
import { defaultStore } from '@/store';

const hoge = defaultStore.getState('hoge');
</script>

[tamaina]

これって将来的にはgetStateをasyncにするということ？

[syuilo]

IndexedDBにするからそうね

[syuilo]

(というよりasyncではない期間はなさそう)

[tamaina]

なんかasync setup()面倒臭そう

[syuilo]

なんかasync setup()面倒臭そう

これがあるので https://github.com/misskey-dev/misskey/issues/8120 はとりあえず後回しにしようと思ってる

[syuilo]

ロードマップ

1. CompositionAPI移行(+globalProperties廃止)
2. PizzaxをIndexedDBに

[syuilo]

あら、勘違いしてたけどonMounted内でonUnmounted登録しても効果無いのかしら

https://v3.ja.vuejs.org/api/composition-api.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%95%E3%83%83%E3%82%AF

これらのライフサイクルフック登録関数は、setup() の間にのみ、同期的に使用できます。

[syuilo]

あら、勘違いしてたけどonMounted内でonUnmounted登録しても効果無いのかしら

https://v3.ja.vuejs.org/api/composition-api.html#%E3%83%A9%E3%82%A4%E3%83%95%E3%82%B5%E3%82%A4%E3%82%AF%E3%83%AB%E3%83%95%E3%83%83%E3%82%AF

これらのライフサイクルフック登録関数は、setup() の間にのみ、同期的に使用できます。

Vue SFC Playgroundで試したらちゃんと呼ばれたわ

[tamaina]

置き換えマニュアルを書いてみた

https://gist.github.com/tamaina/43642876891ae3283987f59a195df3c9

[syuilo]

置き換えマニュアルを書いてみた

https://gist.github.com/tamaina/43642876891ae3283987f59a195df3c9

👍👍👍

[tamaina]

Vue SFC Playgroundで試したらちゃんと呼ばれたわ

呼ばれはするけどなんかWarning出てない？

[syuilo]

props変換スクリプト書いた

function genProps(props) {
    let ps = '';
    let df = '';

    for (const [k, v] of Object.entries(props)) {
        const name = v.required ? k : k + '?';
        const type = v.type === String ? 'string' :
            v.type === Number ? 'number' :
            v.type === Boolean ? 'boolean' :
            'any';
        ps += `\t${name}: ${type};\n`;

        if (v.default !== undefined) {
            const d = typeof v.default === 'string' ? `'${v.default}'` : v.default;
            df += `\t${k}: ${d},\n`;
        }
    }

    console.log(`const props = withDefaults(defineProps<{\n${ps}}>(), {\n${df}});`);
}

[tamaina]

onMounted内でonUnmounted登録

アンチパターンのような気がするけど…

[syuilo]

done

[syuilo]

https://github.com/SortableJS/vue.draggable.next がOptionsAPI使っててVUE_OPTIONS_APIをfalseにできないことが判明

[EbiseLutica]

sortablejs直接使うしかない

[syuilo]

長い間メンテナンスされてないしやめたい…

[syuilo]

sortablejs直接使うしかない

なんか大変そう

[syuilo]

現状他にまともなVueラッパーライブラリが存在しない(はず)なので、https://github.com/SortableJS/vue.draggable.next を使うか自前でなんとかするかの二択しかない

[tamaina]

vue draggable、更新が3年前だしフォークでもしたら

[syuilo]

あーコード量そんな多くなさそうだしその手もあるな