Eine kurze Analyse der Verwendung des Pinia-Statusverwaltungstools in Vue-Projekten

Wie verwende ich das Pinia-Statusverwaltungstool im Vue-Projekt? Im folgenden Artikel erfahren Sie mehr über die Verwendung von Pinia-Statusverwaltungstools in Vue-Projekten. Ich hoffe, er wird Ihnen hilfreich sein!

Auf der offiziellen Website von Pinia heißt es: Pinia ist ein Repository für Vue, mit dem Sie den Status über Komponenten/Seiten hinweg teilen können. Vuex kann auch als Zustandsverwaltungstool verwendet werden. Was ist also der Unterschied zwischen den beiden?

Der Unterschied zwischen Pinia und Vuex

• Pinia verfügt nur über Stores, Getter, Aktionen und keine Mutationen, was den Betrieb der Zustandsverwaltung vereinfacht. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]
• Pinia-Modulteilung erfordert keine Module,
• Pinia automatisierte Codeaufteilung
• Pinia bietet gute Unterstützung für ts und die Kompositions-API von vue3
• Pinia ist größer, kleiner, bessere Leistung

Verwenden Sie Pinia

defineStore( ) Der erste Parameter der Methode: der Name des Containers, der Name muss eindeutig sein und darf nicht wiederholt werden defineStore( ) 方法的第一个参数：容器的名字，名字必须唯一，不能重复
defineStore( ) 方法的第二个参数：配置对象，放置state，getters，actions
state 属性： 用来存储全局的状态
getters属性： 用来监视或者说是计算状态的变化的，有缓存的功能
actions属性： 修改state全局状态数据，可以是异步也可以是同步
Pinia可以用于vue2.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")

• 在store文件夹下新建test.js

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']
            } 
         ]
    }
})

在用actions的时候，不能使用箭头函数，因为箭头函数绑定是外部的this。actions里的this指向当前store

• 在store文件夹下新建index.js，便于管理

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

• 新建A.vue组件，引入store模块和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>

直接修改数据的两种方式

直接修改数据与使用$path修改数据相比，官方已经明确表示$patch的方式是经过优化的，会加快修改速度，对程序的性能有很大的好处。所以如果你是多条数据同时更新状态数据，推荐使用$patch方式更新。
虽然可以直接修改，但是出于代码结构来说， 全局的状态管理还是不要直接在各个组件处随意修改状态，应放于actions中统一方法修改（piain没有mutation）。

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

使用actions修改数据

直接调用actions中的方法，可传参数

const actionsBtn = (){
      testStore.addNum(5)  
}

重置state中数据

store中有$reset方法，可以直接对store中数据重置

const treset = (){
    testStore.$reset()
}

Pinia持久化存储

• 实现持久化存储，需要配合以下插件使用

yarn add  pinia-plugin-persist

• 配置store文件夹下的<code>index.js文件，引入pinia-plugin-presist插件

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

• 配置stroe文件夹下的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存储
  - strategies，进行更多配置
  - key，不设置key时，storage的key为definePinia的第一个属性，设置key值，则自定义storage的属性名
• storage:localStorage，设置缓存模式为本地存储
• paths，不设置时对state中的所用数据进行持久化存执，设置时只针对设置的属性进行持久化存储

Pinia模块化实现

模块化实现即在store对要使用的模块新建一个js文件，比如user.js文件。然后配置内容跟其他模块一样，根据自己需求进行设置，然后在对应页面引入。

Pinia中store之间互相调用

比如：test.js获取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中的namedefineStore( ) Der zweite Parameter der Methode: Objekt konfigurieren, Status platzieren, Getter, Aktionen

state-Attribut: Wird zum Speichern des globalen Status verwendet🎜Getter Attribut: Wird zum Überwachen oder Sagen verwendet. Es wird zum Berechnen von Zustandsänderungen verwendet und verfügt über eine Cache-Funktion. 🎜actions-Attribut: Ändern Sie die globalen Zustandsdaten des Staates, die asynchron oder synchron sein können. 🎜Pinia kann für vue2.x verwendet werden. Es kann auch in vue3 verwendet werden. <strong><code>Bei der Verwendung von Aktionen können Sie keine Pfeilfunktionen verwenden, da die Pfeilfunktionsbindung extern erfolgt. Dies zeigt in Aktionen auf den aktuellen Store🎜🎜🎜Erstellen Sie zur einfachen Verwaltung eine neue index.js im Store-Ordner🎜🎜

const actionBtn = () => {
    testStore.getUserData()
};

🎜🎜Erstellen Sie eine neue A.vue Komponente und stellen Sie das Store-Modul und die storeToRefs-Methode vor Daten direkt ändern Im Vergleich zur Verwendung von $path zum Ändern von Daten hat die offizielle Methode 🎜🎜 deutlich gemacht, dass die Methode von $patch optimiert ist und die Änderung beschleunigt und wirken sich auf das Programm aus. Es gibt enorme Leistungsvorteile. Wenn Sie Statusdaten mit mehreren Daten gleichzeitig aktualisieren, wird daher empfohlen, zum Aktualisieren die Methode $patch zu verwenden. 🎜 Obwohl es aufgrund der Codestruktur direkt geändert werden kann, sollte die globale Statusverwaltung den Status jeder Komponente nicht direkt nach Belieben ändern. Sie sollte in einer einheitlichen Methode in actions geändert werden (Piain tut dies nicht). Mutationen haben). 🎜rrreee🎜Verwenden Sie Aktionen, um Daten zu ändern🎜🎜Rufen Sie die Methode direkt in actions auf, und Sie können Parameter übergeben🎜rrreee🎜Setzen Sie die Daten im Status zurück🎜🎜Es gibt $ in <code> store Die Methode zum Zurücksetzen kann die Daten in store direkt zurücksetzen 🎜rrreee🎜🎜configuration<code>index.js-Datei im Store-Ordner, führen Sie das pinia-plugin-presist-Plug-in 🎜🎜rrreee🎜🎜 ein Konfigurieren Sie test.js im Speicherordner File, verwenden Sie das Attribut presist, um 🎜🎜rrreee🎜🎜enable:true zu konfigurieren, aktivieren Sie den dauerhaften Speicher, standardmäßig wird sessionStorage zum Speichern 🎜 - Strategien, für weitere Konfiguration 🎜 - Schlüssel, wenn der Schlüssel nicht festgelegt ist, ist der Speicherschlüssel das erste Attribut von definePinia, legen Sie den Schlüsselwert fest, passen Sie dann den Attributnamen des Speichers an 🎜🎜 storage:localStorage, stellen Sie den Cache-Modus auf lokalen Speicher 🎜🎜paths ein , und setzen Sie es auf state, wenn es nicht festgelegt ist. Die verwendeten Daten werden beibehalten und gespeichert. Beim Festlegen werden nur die festgelegten Attribute beibehalten. 🎜🎜🎜Modulare Implementierung von Pinia🎜🎜Modulare Implementierung bedeutet das Erstellen einer neuen js-Datei im Store für das zu verwendende Modul, z. B. user .js-Dateien. Dann ist der Konfigurationsinhalt derselbe wie bei anderen Modulen, wird entsprechend Ihren eigenen Anforderungen festgelegt und dann auf der entsprechenden Seite vorgestellt. 🎜🎜🎜Zwischen Geschäften in Pinia Rufen Sie jeweils an other🎜🎜Zum Beispiel: test.js ruft den Attributwert name von state in user.js ab test.js wird in die 🎜rrreee🎜A.vue-Komponente in user.js🎜rrreee🎜user.js eingeführt code>: Rufen Sie die Methode <code>getUserData in test.js auf, um den Wert name in uesr.js abzurufen.🎜

const actionBtn = () => {
    testStore.getUserData()
};

（学习视频分享：编程基础视频）

Das obige ist der detaillierte Inhalt vonEine kurze Analyse der Verwendung des Pinia-Statusverwaltungstools in Vue-Projekten. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!