Offizielle Website von Pinia: pinia.vuejs.org
1. Pinia installieren
npm install pinia --save
2. Pinia konfigurieren
(Die Standardprojekte verwenden alle TypeScript und das Standardsuffix ist .ts.)
Erstellen Sie ein neues Speicherverzeichnis im src-Verzeichnis und erstellen Sie dann in diesem Verzeichnis eine neue index.ts-Datei mit dem folgenden Inhalt:
import {
createPinia } from 'pinia'
const store = createPinia()
export default store
3. Registrieren und aktivieren Sie Pinia im Projekt
Öffnen Sie „main.ts“ unter dem Projekt und fügen Sie den Inhalt von Pinia hinzu:
import {
createApp } from 'vue'
import App from './App.vue'
// 导入Pinia状态管理器
import store from './store/index'
createApp(App).use(store).mount('#app')
4. Erstellen Sie einen Staat
Erstellen Sie eine neue user.ts-Datei im Verzeichnis src/store mit folgendem Inhalt:
import {
defineStore } from 'pinia'
export const userStore = defineStore('userInfo', {
state: () => {
return {
userID: '10001',
userName: '某同学',
}
},
getters: {
fullName: (state) => {
return `${
state.userName}(${
state.userID})`
},
},
// action 支持 async/await 的语法，可以自行添加使用
// action 里的方法相互之间调用，直接用 this 访问即可
actions: {
updateUserName(name: string) {
this.userName = name
},
},
})
5. Verwenden Sie diesen Store auf der Seite
Beispielsweise muss es auf der Seite app.vue verwendet werden. Der Inhalt lautet wie folgt:
<template>
{
{
store.fullName }}
<p>
<button @click="onChangeName()">改变Store里的名字</button>
</p>
</template>
<script setup lang="ts">
import {
ref, onMounted } from 'vue'
import {
userStore } from '@/store/user'
const store = userStore()
const onChangeName = (name) => {
store.updateUserName(name ?? '李同学')
}
onMounted(() => {
onChangeName('张同学')
})
</script>
<style scoped></style>
Zu diesem Zeitpunkt ist ein Basisspeicher fertiggestellt. Wenn Sie noch den lokalen Speicher kombinieren müssen, um Daten dauerhaft zu speichern, lesen Sie weiter.
6. Datenpersistenz von Pinia mithilfe des Plug-ins (pinia-plugin-persist)
Pinia Plugin Persist offizielle Website: Pinia-Plugin-Persist
1. Pinia-plugin-persist installieren
npm install pinia-plugin-persist --save
2. Aktivieren Sie pinia-plugin-persist in Pinia
Öffnen Sie src/store/index.ts und ändern Sie den Inhalt wie folgt:
import {
createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
const store = createPinia()
store.use(piniaPluginPersist)
export default store
3. Verwenden Sie localStorage, um Daten in einem Zustand zu speichern
Öffnen Sie die oben erstellte Datei user.ts und ändern Sie den Inhalt wie folgt:
import {
defineStore } from 'pinia'
export const userStore = defineStore('userInfo', {
state: () => {
return {
userID: '10001',
userName: '某同学',
}
},
getters: {
fullName: (state) => {
return `${
state.userName}(${
state.userID})`
},
},
actions: {
updateUserName(name: string) {
this.userName = name
},
},
// 开启数据缓存
persist: {
enabled: true,
strategies: [
{
key: 'my_project', // key可以自己定义，不填的话默认就是这个store的ID
storage: localStorage, // storage可以填sessionStorage，localStorage
paths: ['userID', 'userName'] }, // paths是需要存储的字段，不填就是全部
},
],
},
})