Pinia chinesische Dokumentation
一种前端实现不同组件之间共享状态数据的技术，可以调用异步函数访问服务器
坑：Pinia 的状态Standardmäßig bleibt er nicht über Browseraktualisierungen hinweg bestehen, da sein Status im Speicher und nicht im lokalen Speicher oder auf dem Server gespeichert wird .
Wenn Sie den Browser aktualisieren, wird der Status der gesamten Front-End-Anwendung zurückgesetzt, einschließlich des Status von Pinia. Das bedeutet, dass Sie den Status von Pinia neu initialisieren müssen, wenn die Anwendung neu geladen wird.
Um den Status über Browseraktualisierungen hinweg beizubehalten, sind folgende Ansätze zu berücksichtigen:
-
使用浏览器的本地存储或持久化库(z. B. LocalStorage, SessionStorage oder IndexedDB) behalten Zustandsdaten auf dem Client bei, sodass sie nach einer Aktualisierung neu geladen werden können. -
在应用程序初始化时从服务器获取状态数据。Dies erfordert normalerweise eine Benutzerauthentifizierung und serverseitige Speicherung. -
使用服务端渲染（SSR）来保持状态. SSR kann den anfänglichen HTML-Code einschließlich der Statusdaten auf dem Server generieren, sodass dieser beim Laden des Browsers sofort verfügbar ist.
1. Was ist Pinia? Was ist der Effekt?
Was ist es?
Piniaist eine Bibliothek für die Zustandsverwaltung in Vue 3-Anwendungen. Es wird vom Vue.js-Team gepflegt und ist eine Zustandsverwaltungslösung, die speziell für Vue 3 entwickelt wurde.
Was ist der Effekt?
Die Rolle von Pinia besteht darin, Sie bei der Verwaltung des Status Ihrer Anwendung zu unterstützen und es einfacher zu machen, den Status zwischen verschiedenen Komponenten zu teilen und aufrechtzuerhalten.
Was ist ein Laden?
„Speichern“ bezieht sich in diesem Zusammenhang normalerweise auf ein Konzept in einer Zustandsverwaltungsbibliothek, das zum Speichern des Datenzustands einer Anwendung verwendet wird. In Vue.js bezieht sich „Store“ normalerweise auf Vuex und im Fall von Pinia auf das Store-Objekt von Pinia, das zur Verwaltung des Status der Anwendung verwendet wird.
In Pinia umfasst das Store-Objekt die folgenden Eigenschaften:
state: Wird zum Speichern von Anwendungsstatusdaten verwendet. Auf Zustandsdaten kann von Komponenten zugegriffen und diese geändert werden, sie müssen jedoch durch Mutationen geändert werden, um Zustandskonsistenz und Rückverfolgbarkeit sicherzustellen.
getters: Wird verwendet, um stateStandardfunktionen zum Abrufen von Daten zu definieren. Mit Gettern können Sie Daten aus dem Status abrufen, ohne ihn zu ändern.
actions: Wird zum Ausführen asynchroner Vorgänge oder einer Reihe von Betriebsfunktionen verwendet, mit denen Statusdaten geändert werden können. Mit Aktionen können Sie einige Geschäftslogiken im Geschäft ausführen.
Zusammen helfen Ihnen diese Eigenschaften bei der Verwaltung und Bearbeitung von Statusdaten und stellen so sicher, dass der Datenstatus Ihrer Anwendung in Ihrer gesamten Anwendung konsistent ist.
2. Schritte zur Verwendung von Pinia mit Vue2
1. Stellen Sie zunächst sicher, dass Vue 2.x und Pinia in Ihrem Projekt installiert sind.
npm install vue@2 pinia
Anschließend können Sie Pinia in Ihrem Vue 2-Projekt verwenden, indem Sie die folgenden Schritte ausführen:
2. Pinia Store erstellen:
Erstellen Sie in Ihrem Projekt einen Pinia-Store-Ordner, um store.js zu speichern:
import {
defineStore } from 'pinia';
export const useMyStore = defineStore({
id: 'myStore',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
});
3. Pinia initialisieren und in Vue 2 registrieren:
Initialisieren Sie Pinia in Ihrer Einstiegspunktdatei (normalerweise main.js) und registrieren Sie es bei Vue 2:
import Vue from 'vue';
import {
createPinia } from 'pinia';
import App from './App.vue';
Vue.config.productionTip = false;
const pinia = createPinia();
Vue.use(pinia)
new Vue({
render: (h) => h(App),
pinia, // 注册 Pinia
}).$mount('#app');
4. Verwenden Sie Pinia Store in Vue 2-Komponenten:
In Ihrer Vue 2-Komponente können Sie die Funktion useStore verwenden, um den Pinia-Store zu importieren und auf Status und Vorgänge zuzugreifen:
<template>
<div>
<p>Count: {
{
count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import {
useMyStore } from './store';
export default {
computed: {
count() {
return useMyStore().count;
},
},
methods: {
increment() {
useMyStore().increment();
},
decrement() {
useMyStore().decrement();
},
},
};
</script>
3. Schritte zur Verwendung von Pinia mit Vue3
Stellen Sie zunächst sicher, dass Vue 3 und Pinia in Ihrem Projekt installiert sind:
npm install vue@next pinia
//Die nächste und neueste Version von vue
Anschließend können Sie die folgenden Schritte ausführen, um Pinia in vue zu verwenden
1. PiniaStore erstellen:
Erstellen Sie in Ihrem Projekt einen Pinia-Store-Ordner und erstellen Sie darunter store.js:
import {
defineStore } from 'pinia';
export const useMyStore = defineStore({
id: 'myStore',
state: () => ({
count: 0,
}),
actions: {
increment() {
this.count++;
},
decrement() {
this.count--;
},
},
});
2. Pinia initialisieren und in Vue 3 registrieren:
Initialisieren Sie Pinia in Ihrer Einstiegspunktdatei (normalerweise main.js) und registrieren Sie es bei Vue 3:
import {
createApp } from 'vue';
import {
createPinia } from 'pinia';
import App from './App.vue';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia); // 注册 Pinia
app.mount('#app');
3. Verwenden Sie Pinia Store in Vue 3-Komponenten:
In Ihrer Vue 3-Komponente können Sie die Funktion useStore verwenden, um den Pinia-Store zu importieren und auf Status und Vorgänge zuzugreifen:
<template>
<div>
<p>Count: {
{
count }}</p>
<button @click="increment">Increment</button>
<button @click="decrement">Decrement</button>
</div>
</template>
<script>
import {
useMyStore } from './store';
export default {
setup() {
const store = useMyStore();
return {
count: store.count,
increment: store.increment,
decrement: store.decrement,
};
},
};
</script>
setup() 函数: Die Setup-Funktion ist die Eingabefunktion, die zum Konfigurieren von Komponenten in Vue 3 verwendet wird. Sie wird ausgeführt, bevor die Komponenteninstanz erstellt wird. Mit dieser Funktion können返回一个包含响应式数据和方法的对象diese Daten und Methoden im Vorlagenteil der Komponente verwendet werden.
return{ Count: Store.Count, Inkrement: Store.Inkrement, Dekrement: Store.Dekrement}: Geben Sie in der Setup-Funktion über die Return-Anweisung ein Objekt zurück, das die Daten und Methoden enthält, die die Komponente in der Vorlage verwenden muss.
count: store.count: Hier wird das Zählattribut im Store-Objekt der Zählung zugewiesen, damit die Komponente auf diesen Status in der Vorlage zugreifen und ihn anzeigen kann.
increment: store.increment 和 decrement: store.decrement: Diese beiden Zeilen weisen die Inkrementierungs- und Dekrementierungsmethoden im Speicherobjekt zum Inkrementieren und Dekrementieren zu, um diese Vorgänge in der Vorlage auszulösen.
Zusammenfassen
Auf diese Weise können Sie Pinia für die Zustandsverwaltung in Vue 2- oder Vue3-Projekten verwenden.请注意，Vue 2 和 Vue 3 的生命周期和一些语法细节可能有所不同，需要根据你的项目进行适当的调整。
最好的方式是在新项目中直接使用 Vue 3 和 Pinia，以充分利用 Pinia 的特性和性能优势。