👻

【Vue Composition API】WritableComputedRefな配列に変更を加える

2021/01/29に公開

TypeScript

Vue.js

Composition API

tech

本記事の内容

本記事は株式会社iCAREのフロントエンドチームがComposition APIを使用した開発で気づいた点を書いていきます

WritableComputedRefな配列に変更を加える

computedとは？

再計算した値を返す
リアクティブな依存関係が更新されたときに再計算

WritableComputedRefとは？

Conposition APIに内包されている、リアクティブなType
RefやReactiveのようにリアクティブな値を定義

Vue.jsにおけるリアクティブに関しては公式ドキュメントが非常に分かりやすいです🐥

Array.pushの場合

まずはWritableComputedRefの定義

// getは親コンポーネントからpropsで受け取った値を
// setは親コンポーネントに値をemitで渡す

const userList = computed<User[]>({
    get: () => {
        return props.userInfo
    },
    set: (value) => {
        emit('update:', value)
    }
})

配列にpushする

// ユーザーをpushで追加
const addUser = (name: string, age: number) =>
    userList.value.push(userInfo: {
        name,
        age
    }
)

配列の変更を検知しない

set: (value) => {
    console.log(value)
    // 検知しないのでログが出ない
    emit('update:', value)
}

分割代入の場合

// ユーザーをpushで追加
const addUser = (name: string, age: number) =>
    userList.value = [ ...userList.value, { name, age }　]
)

既存の配列である、userListを...で分割し、addUser関数の引数で受け取ったnameとuserをオブジェクトの形で配列の最後に追加する。

今回わかったこと

WritableComputedRefな配列は、pushで変更しても検知しない❌

iCAREではフロントエンドエンジニアを募集しています！

Composition API、TypeScriptやGraphQLを使って型安全を保った開発をしています。
新しい技術やスキルを活かしたい方は→WantedlyもしくはTwitterのDMまでお願いします👍