序文：

現代の Web 開発では、状態管理は非常に重要な問題です。Vue.js フレームワークには Vuex 状態管理ライブラリが組み込まれていますが、アプリケーションの規模と複雑さが増大し続けるにつれて、Vuex ではコードが長くなったり、メンテナンスが困難になったりするなど、解決が困難な問題が発生することがあります。これらの問題を解決するために、新しい状態管理ライブラリがコミュニティに次々と登場しており、その中で Pinia は人気のある選択肢です。

Pinia は、Vue.js をベースにした最新の状態管理ライブラリです。Vuex との違いは、コードがより簡潔で保守しやすく、Typescript と SSR のサポートが優れていることです。さらに、Ponia には個別の Store インスタンスとプラグイン可能なプラグインシステムもあり、開発者は状態管理ロジックプロセスをより適切に制御し、アプリケーションが変化し続けるときに柔軟性と拡張性を維持できます。この記事では、Pinia ライブラリの基本アーキテクチャ、コア概念、機能、アプリケーションシナリオについて包括的に紹介します。読者が Pinia の設計思想と動作原理を深く理解し、実際の開発環境に適用できるようにしたいと考えています。

公式サイトのアドレスは以下の通りです。

ピニア | Vue.js の直感的なストア直感的、タイプセーフ、軽量かつ柔軟な Vue のストアhttps://pinia.vuejs.org/

Pinia の誕生
Pinia は、2019 年 11 月頃から Vue ストアを設計するために、Composition API を再利用する試みを始めました。Pinia は、Vuex のコンセプトにできる限り近づけるように努め、次世代の Vuex のソリューションをテストすることを目指しています。現在、Vuex 5 のオープン RFC と AP は Pinia の API と非常に似ており、これは Pinia が成功していることを示しています。
Pinia の作者 (Eduardo) も Vuejs コアチームのメンバーであり、Router や Vuex などの AP の設計に積極的に参加していることに注意してください。Pinia のデザインの目的は、Vue のわかりやすいコンセプトを維持しながら、ストアの利用体験を再デザインすることです。Pinia の API は、進化を続ける Vuex にできるだけ近づけて、人々が簡単に Vuex に移行したり、将来的には 2 つのプロジェクトを統合したりできるようにします。

特徴

ピニアには以下の特徴があります

直感的に、コンポーネントを定義するようにストアを定義します
Typescript の完全なサポート
突然変異を削除し、状態、ゲッター、アクションのみを削除します
アクションは同期と非同期をサポートします
Vue Devtools は Pinia をサポートし、より良い開発エクスペリエンスを提供します
複数のストアを構築し、自動コード分割を実現する機能
存在を感じさせない超軽量(1kb)
Pinia は独自の機能を拡張するプラグインをサポートしています
サーバーサイドレンダリングのサポート

Pinia は、コンポーネント/ページ間で状態を共有できるようにする vue のリポジトリです。

ピニアの基本的な使い方

1. Pinia コマンドをインストールします。

yarn add pinia
# 或者使用 
npmnpm install pinia

ルートストレージを作成してアプリケーションに渡す(データを格納するバケットを作成してアプリケーションに置く)
main.jsを修正し、piniaが提供するcreatepiniaメソッドを導入し、ルートストレージを作成します。

// main.ts
import { createApp } from "vue";
import App from "./App.vue";
import { createPinia } from "pinia";
const pinia = createPinia();

const app = createApp(App);
app.use(pinia);
app.mount("#app");

2.ストアの作成

ストアデータウェアハウスはパブリックコンポーネントに似ていますが、データを保存するだけであり、このデータは他のすべてのコンポーネントからアクセスおよび変更できます。

pinia が提供するdefinestore()メソッドを使用して、グローバルに使用する必要があるデータを保存するために使用されるストアを作成します。

プロジェクトの src ディレクトリに新しいストアフォルダーを作成して、作成したさまざまなストアを保存します。次に、このディレクトリに新しい user.ts ファイルを作成します。このファイルは、主にユーザー関連のストアを保存するために使用されます。

/src/store/user.ts

import { definestore }  from 'pinia'
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users'，{
    // 其它配置项
}

defineStore 関数は 2 つのパラメータを受け取ります。

name: 文字列、必須項目、ストアの一意の ID。
オプション: オブジェクト、ストア内のデータの構成などのストア構成アイテム、データの変更方法など。

実際、ストアは関数であり、コードを平坦化し、vue3 の実装のアイデアと同じであるため、任意の数のストアを定義できます。

3.ストアを利用する

ストアを作成するということはメソッドを作成することを意味しますが、App.vue でそれを使用するにはどうすればよいでしょうか?

/src/App.vue
<script setup lang="ts">
import { useUsersstore } from "../src/store/user";
const store = useUsersStore();
console.log(store);
</script>

<スクリプトのセットアップ> コンポーネントオプション (プロパティ、データ、メソッドなど) を変数として宣言し、defineComponent 関数を通じてコンポーネントオプションオブジェクトとしてエクスポートできます。これにより、コンポーネントオプションをテンプレートコードとより緊密に統合できるようになり、コードの可読性と保守性が向上します。

宣言された useUsersstore メソッドを導入するだけです

4.状態の追加

ストアはパブリックデータを保存するために使用されます。では、データは具体的にどこに存在しますか? 以前に、defineStore 関数を使用してストアを作成しました。この関数の 2 番目のパラメータは、オプション構成項目です。保存する必要があるデータは、プロパティ内のオプションオブジェクトの状態。
基本的なタスクデータをストアに追加し、user.ts コードを変更するとします。

export const useUsersStore = defineStore("users", {
 state:() => {
    return {
        name : "小猪课堂",
        age: 25,
        sex : "男"
    };
  },
});

上記コードでは、データを格納する構成アイテムにstate属性を追加し、stateに3つのデータを追加しています。⭕注意: state はアロー関数によって返された値を受け取りますが、オブジェクトを直接受け取ることはできません。

5.動作状態

①状態データの読み出し

ストアにデータを保存する目的はストアを操作することであり、具体的な操作は次のとおりです。

<template>
    <img alt="Vue logo" src="./assets/logo.png" />
    <p>姓名: {
   
   { name }}</p>
    <p>年龄: {
   
   { age }}</p>
    <p>性别: {
   
   { sex }}</p>
</template>

<script setup lang="ts">
import { ref } from import "vue";
import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
const name = ref<string>(store.name);
const age = ref<number>(store.age);
const sex = ref<string>(store.sex);
</script>

分解されたコードは次のとおりです。

import { useUsersStore } from "../src/store/user";
const store = useUsersStore();
const { name, age, sex } = store;

②複数コンポーネントの使用状態

ストアを使用する最も重要な目的は、コンポーネント間でデータを共有することです。例: 新しい child.vue コンポーネントを作成し、コンポーネント内の状態データを使用します。

<template>
    <h1>我是child组件</h1>
    <p>姓名: {[ name }]</p
    <p>年龄:{
   
   { age }}</p>
    <p>性别: {[sex }}</p>
</template>
<script setup lang="ts">
import { useUsersstore } from "../src/store/user";
const store = useUsersstore();
const { name, age, sex } = store;
</script>

③状態データの変更

ストア内のデータを変更する場合は、データを直接再割り当てできます。

import { storeToRefs } from 'pinia';
const store = useUsersStore();
const { name, age, sex } = storeToRefs(store);

pinia の storeToRefs 関数を使用すると、状態内のデータが応答するようになります。

④リセット状態

状態データを復元するには、stare の $reset() メソッドを使用します。たとえば、リセットボタンを追加します。

<button @click="reset">重置store</button>
// 重置store
const reset = () =>{
    store.$reset();
}

⑤状態データを一括変更

ストアの $patch メソッドを使用して app.vue コードを変更し、バッチでデータを変更するメソッドを追加します。

<button @click="patchstore">批量修改数据</button>
// 批量修改数据
const patchstore = () => {
    store.$patch({
        name:"张三",
        age: 100,
        sex:"女",
    });
};

⑥ 状態全体を直接置き換える

ストアの $state メソッドを使用して、状態オブジェクト全体を直接置き換えます。

store.$state = { counter:666, name:'张三' }

6.ゲッター属性

ゲッターは、defineStore パラメーター構成項目の別の属性であり、ゲッター属性値は、さまざまなメソッドを含むオブジェクトです。Vue の計算プロパティと同様に、その機能は新しい結果を返すことです。

①ゲッターを追加する

export const useUsersStore = defineStore("users", {
    state: () => [
        return {
            name:"小猪课堂"
            age:25,
            sex:"男"，
        };
    },    
    getters: {
        getAddAge: (state) => {
            return state.age + 100;
        },
    },
});

ゲッター属性が構成項目パラメーターに追加され、属性オブジェクトに getAddAge メソッドが定義されます。このメソッドは、デフォルトで状態パラメーター (状態オブジェクト) を受け取り、その後、メソッドは新しいデータを返します。

②ゲッターを使う

コンポーネントでのゲッターの使用

<template>
    <p>新年龄: [{ store.getAddAge }}</p>
    <button @click="patchstore">批量修改数据</button>
</template>
<script setup lang="ts">
import { useUsersStore } from "../src/store/user"
const store = useUsersStore();
// 批量修改数据
const patchstore = () => {
    store.$patch({
        name:"张三"
        age: 100,
        sex:"女"
    });
};
</script>

③ゲッター内で他のゲッターを呼び出す

このゲッターメソッドで他のゲッターメソッドを呼び出すにはどうすればよいですか?

これをゲッターメソッドで直接呼び出します。これはストアインスタンスを指すため、もちろん他のゲッターを呼び出すことができます。(アロー関数は使用できません)

7.アクション属性

①アクションを追加する

state 属性と getters 属性は主にデータレベルにあり、コンポーネントコード内のデータデータや計算されたプロパティと同様に、特定のビジネスロジックコードを持ちません。

アンロードされたアクション属性はメソッドに似ており、ビジネスロジックを処理するためのいくつかのメソッドを配置するために使用されます。

アクション属性値もオブジェクトであり、同期メソッドや非同期メソッドを含むさまざまなメソッドも格納されます。

export const useUsersStore = defineStore("users"，{
    state: () => {
        return {
             name:"小猪课堂" :
             age:25,
             sex :"男",
        };
    },
    getters: {
        getAddAge: (state) => {
            return (num: number) => {
                return (num:muber) => state.age + num;
        },
        getNameAndAge(): string {
            return this.name + this.getAddAge; // 调用其它getter
        },
    },

actions :{
    saveName(name : string){
        this .name = name ;
    },
 },
});

実際のシナリオでは、このメソッドは任意のロジックであり、通常のメソッドとして扱うことができますが、特別なのは、リクエストの送信、トークンの保存などができることです。アクションメソッド内でこれを現在のストアに指定できます。

②使用アクション

const saveName {
    store.saveName("我是小猪");
}

要約:

Pinia は、開発者がアプリケーションの状態をより適切に整理および管理できるようにする、Vue.js アプリケーション用の軽量の状態管理ライブラリです。他の状態管理ライブラリと比較して、Pinia は高速かつ小型であると同時に、スケーラビリティと使いやすさという利点もあります。

Pinia を使用すると、状態管理を簡単に実装し、アプリケーション内の状態をより適切に整理して維持できるため、コードの可読性と保守性が向上します。TypeScript もサポートしており、優れたドキュメント、わかりやすい API 設計、フレンドリーなコミュニティサポートを備えています。

ピニアナニーレベルのクイックスタート紹介記事

特徴