Vue3 pinia 상태 관리 도구 사용 방법

피니아란 무엇인가요?

이것은 vue3의 새로운 상태 관리 도구입니다. 간단히 말해서 이전 vuex와 동일하지만 vue2도 지원하는 것이 좋습니다. 로고가 파인애플처럼 생겼다고 해서 빅 파인애플이라고도 부릅니다.

이것은 vue3의 새로운 상태 관리 도구입니다. 간단히 말하면 이전 vuex와 동일하지만 Mutations도 지원합니다. vue2를 적극 권장합니다. 로고가 파인애플처럼 생겼다고 해서 빅 파인애플이라고도 부릅니다. 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

설치 명령어🎜

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

🎜를 사용하세요 🎜🎜1. mian.js에 pinia를 도입하고 글로벌로 등록하세요 🎜rrreee🎜 2. 새로운 저장 폴더 index를 생성하세요 .js 파일, TS를 지원하는 경우 index.ts를 생성하고 파일에 pinia를 도입한 다음 이를 사용하여 상태를 저장할 수 있습니다🎜rrreee🎜 3. 피니아에 저장된 상태를 사용하세요🎜rrreee

위 내용은 Vue3 pinia 상태 관리 도구 사용 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!