So führen Sie das Pinia-Repository in Vue3 ein und verwenden es

1. Installieren Sie auf Ihre bevorzugte Weise

yarn add pinia
# 或者使用 npm
npm install pinia

2. Führen Sie main.js ein

import { createApp } from 'vue'
import App from './App.vue'
 
const app=createApp(App)
import { createPinia } from 'pinia' //引入pinia
app.use(createPinia())
 
app.mount('#app')

3. Erstellen Sie eine Store-Datei und konfigurieren Sie die interne index.js-Datei

import { defineStore } from 'pinia' //引入pinia
 
//这里官网是单独导出  是可以写成默认导出的  官方的解释为大家一起约定仓库用use打头的单词 固定统一小仓库的名字不易混乱
export const useCar=defineStore("test",{ 
    state: () =>{
        return  ({
            msg:"这是pinia",
            name:"小小",
            age:18
            }) //为了避免出错，返回的值用()包起来
    } 
})

5 .$reset()

<template>
    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
    <button @click="modify">修改store.name</button>
</template>
 
<script>
import { defineComponent, ref } from &#39;vue&#39;;
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        modify(){
             store.name = state.testMsg //修改pinia里面的数据
             console.log(store.name)
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

6. Gruppenänderungsspeicher.$patch kann Pinias Daten gleichzeitig ändern

Funktionen: Stapeländerung, aber der Status wird nur einmal aktualisiert

<template>
    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
    <button @click="reset">重置store.name</button>
</template>
 
<script>
import { defineComponent, ref } from &#39;vue&#39;;
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        reset(){
             store.$reset() //重置pinia里面的数据
             console.log(store.name)
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

7 Änderung abonnieren

<template>
    <h2>{{store.msg}}{{store.name}}{{store.age}}</h2>
    <button @click="modify">修改store.name</button>
    <button @click="reset">重置store.name</button>
    <button @click="allModify">群体修改store.name</button>
</template>
 
<script>
import { defineComponent, ref } from &#39;vue&#39;;
import {
  reactive,
  toRefs,
  onMounted,
  onActivated
} from "vue";
import {useCar} from "../store/index.js" //将之前配置的pinia文件夹中的index.js文件引入
export default defineComponent({
  let store=useCar() //接收
  setup() {
    const state = reactive({
      testMsg: "原始值",
    });
    onMounted(async () => {});
    onActivated(() => {})
    const methods = {
        modify(){
             store.name = state.testMsg //修改pinia里面的数据
             console.log(store.name)
        },
        reset(){
             store.$reset() //重置pinia里面的数据
             console.log(store.name)
        },
        allModify(){
             store.$patch({
              name:"花花",
              age:20,
            })
        }
    };
    return {
      ...toRefs(state),
      ...methods,
    };
  }
})
</script>

8. Getter

Getter entspricht vollständig dem berechneten Wert des Store-Status. Sie können mithilfe des Getters-Attributs in defineStore() definiert werden. Sie erhalten „state“ als ersten Parameter, um die Verwendung von Pfeilfunktionen zu fördern: (ps: Obwohl es empfohlen wird, bietet es dennoch Verwendungsmethoden für Nicht-ES6-Spieler. Intern kann dies zur Darstellung des Status verwendet werden)

//可以通过 store 的 $subscribe() 方法查看状态及其变化,通过patch修改状态时就会触发一次
store.$subscribe((mutation, state) => { 
  // 每当它发生变化时，将整个状态持久化到本地存储
  localStorage.setItem('hello', JSON.stringify(state))
})

9 . Aktionen

in pinia Mutaion wird nicht bereitgestellt, da Aktionen ausreichen (es kann den Status einheitlich asynchron und synchron ändern). Der Grund, warum diese Funktion bereitgestellt wird, ist die geschäftliche Vereinheitlichung des öffentlichen Änderungsstatus im Projekt

Das obige ist der detaillierte Inhalt vonSo führen Sie das Pinia-Repository in Vue3 ein und verwenden es. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!