Pinia

Pinia応用背景
既存のアイテムはVUEの2番目にTypescriptを適用しているので、タイプ定義は非常に複雑です.(ちなみにvue 3+vuex 4の方が便利です.)
たとえば、アクション、マルチステーション、および各タイプを指定するために、関数名をEnumとして定義する必要があります.また、各タイプをショップとして定義する必要もあります.
また、タイプ推定では、自動的に完了したコンテンツにアクセスできますが、コードはますます複雑に見えます.(タイプ推定はVuex Helper関数を使用していません.)

ショップ名空間グローバルモジュールのaaオブジェクトのbbプロパティにアクセス

store.state.global.aa.bb.~

Enumと定義されたMUTIONタイプコール(Commit)を使用

store.commit(GlobalMutationTypes.SET_SIGNED, data);

Enumと定義されたActionTypeを使用してAction(Dispatch)を呼び出す

$store.dispatch(BizActionTypes.FETCH_ITEM_LIST);

Pinia ( 正式な書類 )
状態管理プラグイン

がVuexに取って代わる

VueConf Toronto 2021において、VUEの創始者Even Youは、状態管理プラグインとしてVuexではなくPiniaを推奨する
なぜPiniaを使うのですか?

はまず使いやすいです.△使用方法について簡単に説明します.

に突然変異はなかった.

ステータスの変更は、定義およびCommitを必要としません.

は、Vueインスタンスのステータス値を変更するように読み取り/書き込みを行うだけです.

複雑なパッケージを必要とせずに

Typescriptをサポートします.

PiniaはTypeScriptによって最大限のタイプ推定を実現した.

は、特にタイプを指定する必要はなく、タイプを推定することもできる.

ネームスペースモジュールがない

devtoolsもサポートされています.(ただし、最新バージョンを使用する必要があります.)

使用方法
ショップ定義

store/xxx.ts

の作成

の既存のVuexに示すように、状態でgettersを定義します.たとえば、状態を管理する変数、サーバからデータを受信して状態を変更するなどです.

// 예시) app.ts
import { defineStore } from 'pinia';

// defineStore<모듈명, 타입>
export const useAppStore = defineStore('app', {
    state: () => ({ drawer: false, lastName: 'test' }),
    actions: {
        changeDrawer() {
            this.drawer = !this.drawer;
        },
    }, 
    getters: {
        getFullName(firstName: String) {
            return firstName + lastName;
        }
    }
});

ショップの使用-State

storeをuseAppStore()にインポートするだけでstoreのステータスにアクセスできます.

変異は存在しないため、v-modelでステータス値を使用する場合も、既存のvuexを使用するようにsetterを個別に定義する必要はありません.

既存のvuexコード(v-modelを使用)

Pinia使用コード

<input v-model="store.drawer"/>

export default {
    setup() {
        const store = useAppStore();
        return { store }
    }
}

は、分配構造が分解されると反応性が失われることに注意しなければならない.

// 이렇게 선언할 경우 drawer는 초기값으로 계속 남아있습니다.
const { drawer } = useAppStore();

appStore全体をエクスポートしない場合は、次の操作を行います.

// 1. 기존과 같이 computed 활용 (값의 변경도 필요한 경우 setter도 정의 필요)
return {
    count: computed(() => store.count)
}

// 2. composition API의 toRefs 활용
const { drawer } = toRefs(useAppStore());
return { drawer }

storeToRefs
Piniaの公式文書では、第2の方法(合成APIのtoRefsを使用する)はstoreToRefsを使用することであると指摘されている.
現在はVue 2には適用されません.😢( #852 )
PiniaのstoreToRefsの挙動はCompositionAPIのtoRefsと似ているが,メソッドのような属性は無視してインポートする.

Composition API - toRefs

アクティブオブジェクトを通常オブジェクトに変換して返しますが、返される各プロパティはrefとして元のアクティブオブジェクトPropertyにリンクされます.

ショップ使用可能-Getters

<template>
    <div>
        fullName: {{ fullName }}
    </div>
</template>

export default {
    setup() {
        const store = useAppStore();
        return { fullName: store.getFullName }
    }
}

ショップの使用-アクション

<template>
    <div>
        <v-btn @click="store.changeDrawer">테스트</v-btn>
    </div>
</template>

export default {
    setup() {
        // #1 통째로 내보내기
        const store = useAppStore();
        return { store }
        // #2 특정 액션만 내보내기 
        // const store = useAppStore();
        // return { changeDrawer: store.changeDrawer }
    }
}

サマリ

の使い方は簡単です.(=走行曲線が低い.)

モジュール単位で書かれているので、モジュールが多くなっても複雑にはなりません.

は気にしなくても、自分でタイプ推定ができます.

の最後の部分
Piniaの適用や既存のVuexの使用よりも簡単に使用できます.
Piniaは現在、Vueの公式プラグインではありませんが、PiniaとVuexの2つのプロジェクトを統合したり、簡単に移動したりするのに役立ちます.
新しいプロジェクトがVue 2+Typescript環境の場合、ステータス管理が必要な場合はPiniaの適用が考えられます.