Vue プロジェクトで Pinia 状態管理ツールを使用する方法の簡単な分析

Vueプロジェクトで Pinia 状態管理ツールを使用するにはどうすればよいですか?次の記事では、Vue プロジェクトでの Pinia 状態管理ツールの使用について説明します。

Pinia 公式 Web サイトには次のように記載されています: Pinia は、コンポーネント/ページ間で状態を共有できる Vue のリポジトリです。 Vuex は状態管理ツールとしても使用できますが、この 2 つの違いは何でしょうか?

Pinia と Vuex の違い

• Pinia にはストア、ゲッター、アクションのみがあり、ミューテーションがないため、状態管理の操作が簡素化されます。 [関連する推奨事項: vuejs ビデオ チュートリアル 、Web フロントエンド開発 ]
• pinia のモジュール分割にはモジュールは必要ありません、
• pinia の自動コード分割
• Pinia は ts と vue3 の合成 API を適切にサポートしています。
• Pinia はサイズが小さく、パフォーマンスが優れています

Pinia を使用してください

defineStore( ) メソッドの最初のパラメータ: コンテナの名前。名前は一意である必要があり、重複することはできません。
defineStore( ) 2 番目のパラメータメソッド: 構成オブジェクト、配置状態、ゲッター、アクション
state 属性: グローバル状態を保存するために使用されます
getter属性: 状態の変化を監視または計算するために使用されます。キャッシュ関数付き
actions属性: 状態グローバル状態データを変更します。これは非同期または同期可能です
Piniavue2.x または vue3.x で使用できます

• インストール

yarn add pinia -S

• main.jsはじめに

import {createApp} from "vue"
import App from "./app.vue"
import store from "./store/index.js"
const app = createApp(App);
const store = createPinia();
app.use(store).mount("#app")

• ストア ファイル内
#

import {definePinia} from "pinia"
export default testStore = definePinia('testId',{
    state:()=>{
         tname:"test",
         tnum:0,
    },
    getters:{
       changeTnum(){
           console.log("getters")
           this.tnum++;
       }
    },
    actions:{
       addNum(val){
          this.tnum += val
       }
    },
    //持久化存储配置
    presist:{
         enable:true,//
         strategies:[
            {
            key:"testId",
            storage:localStorage,
            paths:['tnum']
            } 
         ]
    }
})

フォルダーの下に新しい test.js を作成します。アクションを使用する場合、アロー関数のバインディングは外部にあるため、アロー関数は使用できません。これはアクションで現在のストアを指します

管理を容易にするためにストア フォルダーの下に新しいindex.jsを作成します

• import {createPinia} from "pinia"
  const store = createPinia();
  export default store

New
• A.vue コンポーネント、ストア モジュールと storeToRefs メソッド
  storeToRefs: store 内のデータを分解し、応答性を高めますデータ

<template>
    <div>
        <div> {{tname}}</div>
        <div> {{tid}}</div>
        <div> tnum: {{tnum}}</div>
        <div> {{tchangeNum}}</div>
        <div><button @click="tchangeName">修改</button></div>
        <div> <button @click="treset">重置</button></div>
        <div @click="actionsBtn">actionsBtn</div>
    </div>
</template>

<script setup>
import { storeToRefs } from &#39;pinia&#39;
import { useStore } from &#39;../store/user&#39;
import { useTest } from &#39;../store/test.js&#39;
const testStore = useTest();
let { tname, tchangeNum, tnum } = storeToRefs(testStore)
</script>

データを直接変更する 2 つの方法

データを直接変更するための

$path の使用と比較して、公式は、$patch を明確にしています。 メソッドは最適化されており、変更が高速化され、プログラムのパフォーマンスに大きなメリットをもたらします。そのため、ステータスデータを複数のデータで同時に更新する場合は、$patch メソッドを使用して更新することをお勧めします。 直接変更することもできますが、コード構造上、グローバル状態管理は各コンポーネントで状態を直接変更すべきではなく、
actions で統一された方法で変更する必要があります (piain には突然変異）。

//直接修改数据
tchangeName(){
     tname.value = "测试数据"；
     tnum.value++;
}
//当然也可以使用`$path`批量修改
tchangeName(){
     testStore.$path(state=>{
          state.tname = "测试数据"；
          state.value = 7;
     })
}

アクションを使用してデータを変更する

#アクション

でメソッドを直接呼び出し、パラメータを渡すことができます <pre class="brush:js;toolbar:false;">const actionsBtn = (){ testStore.addNum(5) }</pre>状態のデータをリセット

store

には $reset メソッドがあり、store<pre class="brush:js;toolbar:false;">const treset = (){ testStore.$reset() }</pre>Pinia 永続ストレージのデータを直接リセットできます。

永続ストレージを実現するには、次のプラグインを使用して

• yarn add  pinia-plugin-persist

を使用して

index.js
• を構成する必要があります。 pinia-plugin-presistpluginを導入します

  import {createPinia} from "pinia"
  import piniaPluginPresist from "pinia-plugin-presist"
  const store = createPinia();
  store.use(piniaPluginPresist)
  export default store

  stoeフォルダーの下にtest.jsファイルを設定し、使用します構成する
presist

属性

• import {definePinia} from "pinia"
  export default testStore = definePinia('testId',{
      state:()=>{
           tname:"test",
           tnum:0,
      },
      getters:{
         changeTnum(){
             console.log("getters")
             this.tnum++;
         }
      },
      actions:{
         addNum(val){
            this.tnum += val
         }
      },
      //持久化存储配置
      presist:{
           enable:true,//
           strategies:[
              {
              key:"testId",
              storage:localStorage,
              paths:['tnum']
              } 
           ]
      }
  })

enable:true

、永続ストレージを有効にします。デフォルトでは

sessionStorage
• を使用します。 - 戦略 を保存するには、詳細構成 -
  key に進みます。キーが設定されていない場合、ストレージのキーは definePinia# の最初の属性になります。 ##. キー値が設定されている場合、ストレージの属性名がカスタマイズされます
  storage:localStorage、キャッシュ モードをローカル ストレージ
• paths に設定します、設定されていない場合、state
で使用されるデータが処理されます。 永続ストレージ、設定すると、設定された属性のみが永続的に保存されます。
• Pinia モジュール実装 モジュール実装とは、使用するモジュール用にストア内に新しい js ファイル (
user.js

ファイルなど) を作成することを意味します。設定内容は他のモジュールと同じで、必要に応じて設定し、対応するページで紹介します。

Pinia のストアは互いに呼び出します
例: test.js

Get

user.js

中

state の name 属性値は test.js user.js

import { defineStore } from 'pinia'
import { userStore } from "./user.js"
export const useTest = defineStore("testId", {
	state: () => {
		return {
			tid: "111",
			tname: "pinia",
			tnum: 0
		}
	},
	getters: {
		tchangeNum() {
			console.log('getters')
			return this.tnum + 100
		}
	},
	actions: {
		tupNum(val) {
			console.log('actions')
			this.tnum += val;
		},
		getUserData() {
			console.log(useStore().name);
			return useStore().name;
		},
	},
	persist: {
		//走的session
		enabled: true,
		strategies: [
			{
				key: "my_testId",
				storage: localStorage,
				paths: ['tnum']
			}
		]
	}
})

user.js に導入されています中

import { defineStore } from 'pinia'
export const useStore = defineStore('storeId', {
  state: () => {
    return {
      num: 0,
      name: '张三'
    }
  }
})

A.vueコンポーネント。test.js

の

getUserDataメソッドを呼び出して、uesr.jsを取得します。 ##名前 値 (##)<pre class="brush:js;toolbar:false;">const actionBtn = () =&gt; { testStore.getUserData() };</pre><p>（学习视频分享：<a href="https://www.php.cn/course/list/91.html" target="_blank" textvalue="编程基础视频">编程基础视频</a>）<br></p>

以上がVue プロジェクトで Pinia 状態管理ツールを使用する方法の簡単な分析の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。