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? 
defineStore( )Der erste Parameter der Methode: der Name des Containers, der Name muss eindeutig sein und darf nicht wiederholt werdendefineStore( )方法的第一个参数：容器的名字，名字必须唯一，不能重复defineStore( )方法的第二个参数：配置对象，放置state，getters，actionsstate属性： 用来存储全局的状态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")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
import {createPinia} from "pinia"
const store = createPinia();
export default storeA.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 'pinia'
import { useStore } from '../store/user'
import { useTest } from '../store/test.js'
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中的方法，可传参数
const actionsBtn = (){
testStore.addNum(5)
}store中有$reset方法，可以直接对store中数据重置
const treset = (){
testStore.$reset()
}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 storepresist属性进行配置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中的所用数据进行持久化存执，设置时只针对设置的属性进行持久化存储模块化实现即在store对要使用的模块新建一个js文件，比如user.js文件。然后配置内容跟其他模块一样，根据自己需求进行设置，然后在对应页面引入。
比如：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( ) </code >Der zweite Parameter der Methode: Objekt konfigurieren, Status platzieren, Getter, Aktionen</p><code>state-Attribut: Wird zum Speichern des globalen Status verwendet🎜Getter</code > Attribut: Wird zum Überwachen oder Sagen verwendet. Es wird zum Berechnen von Zustandsänderungen verwendet und verfügt über eine Cache-Funktion. 🎜<code>actions-Attribut: Ändern Sie die globalen Zustandsdaten des Staates, die asynchron oder synchron sein können. 🎜Pinia< /code> 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()
};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 🎜 -< Code> Strategien, für weitere Konfiguration 🎜 - Schlüssel, wenn der Schlüssel nicht festgelegt ist, ist der Speicherschlüssel das erste Attribut von < code>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 < code>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!
Die übergeordnete Vue-Komponente ruft die Methode der untergeordneten Komponente auf
vue v-wenn
Der Unterschied zwischen vue2.0 und 3.0
So übergeben Sie einen Wert an die Vue-Komponente
Der Unterschied zwischen vue3.0 und 2.0
Vue allgemeine Anweisungen
Was sind die am häufigsten verwendeten Anweisungen in Vue?
Der Unterschied zwischen mpvue und vue
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
