misskey-dev
Vue: Composition APIに移行
フォークでいくつかComposition APIに移行してるので行き詰まったところをば。
AutoComplete
this.$vm が存在しないので、第二引数にわたすものに困る。オートコンプリートの対象であるモデルを含むreactiveオブジェクトを渡すと良い
またあったら共有します
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>
ちなみに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>
なんかasync setup()面倒臭そう
これがあるので https://github.com/misskey-dev/misskey/issues/8120 はとりあえず後回しにしようと思ってる
あら、勘違いしてたけど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() の間にのみ、同期的に使用できます。
あら、勘違いしてたけど
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で試したらちゃんと呼ばれたわ
置き換えマニュアルを書いてみた
https://gist.github.com/tamaina/43642876891ae3283987f59a195df3c9
置き換えマニュアルを書いてみた
https://gist.github.com/tamaina/43642876891ae3283987f59a195df3c9
👍👍👍
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}});`);
}
https://github.com/SortableJS/vue.draggable.next がOptionsAPI使ってて__VUE_OPTIONS_API__をfalseにできないことが判明
現状他にまともなVueラッパーライブラリが存在しない(はず)なので、https://github.com/SortableJS/vue.draggable.next を使うか自前でなんとかするかの二択しかない