So verwenden Sie das Pinia-Statusverwaltungstool Vue3

Was ist Pinia?

Dies ist das neue Statusverwaltungstool von vue3. Es entfernt Mutationen, unterstützt aber auch vue2. Da sein Logo wie eine Ananas aussieht, nennen wir es auch Big Pineapple.

Dies ist das neue Statusverwaltungstool von vuex. Es entfernt Mutationen, unterstützt aber auch vue2 wird dringend empfohlen. Da sein Logo wie eine Ananas aussieht, nennen wir es auch Big Pineapple. vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

安装命令

npm i pinia

使用

1、mian.js 中引入 pinia，全局注册

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

 2、store文件夹新建 index.js 文件，支持TS的你就建立 index.ts,文件中引入 pinia 使用，用来存储状态

import {defineStore} from 'pinia'
export const useUserStore = defineStore("USER",{
    state() {
        return {
            name: '景天',
            age: 18,
            name1: '胡歌',
            age1: 36
        }
    },
    // 和vuex一样
    getters: {
 
    },
    // 和vuex一样
    actions: {
        setAge() {
            this.age--
        }
    }
})

3、页面中使用 pinia

Installationsbefehl🎜

<template>
    <div>正常取值</div>
    <div>{{User.name}}</div>
    <div>{{User.age}}</div>
    <div>解构取值</div>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>解构取值转ref</div>
    <div>{{name1}}</div>
    <div>{{age1}}</div>
    <button @click="change1">change1</button>
    <button @click="change2">change2</button>
    <button @click="change3">change3</button>
    <button @click="change4">change4</button>
    <button @click="change5">change5</button>
    <div>
        <button @click="handleReset">重置</button>
    </div>
</template>
 
<script setup lang="ts">
import { storeToRefs } from &#39;pinia&#39;;
import { useUserStore } from &#39;./store&#39;;
 
// 获取store中的值
let User = useUserStore()
 
// 通过ES6的结构取值，但是这个值不是响应式的
let {name,age} = User
 
// 通过pinia自带的方法，转换成ref，就是响应式的了
let {name1,age1} = storeToRefs(User)
 
// 改变store中值的方式有五种
// 方式一
function change1() {
    User.age++
}
// 方式二，可一次性修改多个值，对象的形式
function change2() {
    User.$patch({
        name: &#39;雪见&#39;,
        age: 17
    })
}
// 方式三，可一次性修改多个值，函数的形式
function change3() {
    User.$patch((state) => {
        state.name = &#39;徐长卿&#39;
        state.age = 19
    })
}
// 方式四，哪怕修改一个值，也要传所有值？？？
function change4() {
    User.$state = {
        name: &#39;茂茂&#39;,
        age: 16,
        name1: &#39;李逍遥&#39;,
        age1: 18
    }
}
// 方式五，借助actions
function change5() {
    User.setAge()
    //也可以传参
    // User.setAge(999)
}
 
// 重置数据
function handleReset() {
    User.$reset()
}
 
</script>
 
<style>
</style>

🎜Verwenden Sie 🎜🎜1. Fügen Sie pinia in mian.js ein und registrieren Sie es global🎜rrreee🎜 2. Erstellen Sie einen neuen Store-Ordner index .js -Datei, wenn Sie TS unterstützen, können Sie index.ts erstellen, pinia in die Datei einfügen und diese zum Speichern des Status verwenden🎜rrreee🎜 3. Verwenden Sie In Pinia gespeicherter Status 🎜rrreee

Das obige ist der detaillierte Inhalt vonSo verwenden Sie das Pinia-Statusverwaltungstool Vue3. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!