Comment utiliser l'outil de gestion de l'état de Vue3 Pinia-Voir.js-php.cn

Comment utiliser l'outil de gestion de l'état de Vue3 Pinia

WBOY

Libérer： 2023-06-03 13:09:39

avant

1098 Les gens l'ont consulté

Qu'est-ce que le pinia ?

Il s'agit d'un nouvel outil de gestion d'état pour vue3 En termes simples, il est équivalent au précédent vuex. Il supprime les mutations mais prend également en charge vue2. Parce que son logo ressemble à un ananas, nous l'appelons aussi Big Pineapple.

Il s'agit du nouvel outil de gestion d'état de vue3 En termes simples, il est équivalent au précédent vuex. Il supprime les Mutations mais prend également en charge. vue2 est fortement recommandé. Parce que son logo ressemble à un ananas, nous l'appelons aussi Big Pineapple. vue3 新的状态管理工具，简单来说相当于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推荐。因为其logo像是一个菠萝，所以我们还称呼它为大菠萝。

安装命令

npm i pinia

Copier après la connexion

使用

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

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

Copier après la connexion

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

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

Copier après la connexion

3、页面中使用 pinia

Commande d'installation🎜

<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>

Copier après la connexion

🎜Utilisez 🎜🎜1. Introduisez pinia dans mian.js et enregistrez-le globalement 🎜rrreee🎜 2. Créez un nouveau dossier de magasin index. .js , si vous prenez en charge TS, vous pouvez créer index.ts, introduire pinia dans le fichier et l'utiliser pour stocker l'état🎜rrreee🎜 3. Utilisez Statut stocké dans pinia🎜rrreee

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!