詳解Vue3-pinia狀態(tài)管理

更新時間：2022年11月08日 10:05:57 作者：QQ帝國

這篇文章主要介紹了Vue3-pinia狀態(tài)管理,pinia是?vue3?新的狀態(tài)管理工具，簡單來說相當于之前?vuex，它去掉了?Mutations?但是也是支持?vue2?的，需要的朋友可以參考下

pinia是什么？

這個是 vue3 新的狀態(tài)管理工具，簡單來說相當于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推薦。因為其logo像是一個菠蘿，所以我們還稱呼它為大菠蘿。

這個是 vue3 新的狀態(tài)管理工具，簡單來說相當于之前 vuex，它去掉了 Mutations 但是也是支持 vue2 的，尤大推薦。因為其logo像是一個菠蘿，所以我們還稱呼它為大菠蘿。

官網(wǎng)

https://pinia.vuejs.org/

安裝命令

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 使用，用來存儲狀態(tài)

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 中存儲的狀態(tài)

<template>
    <div>正常取值</div>
    <div>{{User.name}}</div>
    <div>{{User.age}}</div>
    <div>解構(gòu)取值</div>
    <div>{{name}}</div>
    <div>{{age}}</div>
    <div>解構(gòu)取值轉(zhuǎn)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 'pinia';
import { useUserStore } from './store';
 
// 獲取store中的值
let User = useUserStore()
 
// 通過ES6的結(jié)構(gòu)取值，但是這個值不是響應(yīng)式的
let {name,age} = User
 
// 通過pinia自帶的方法，轉(zhuǎn)換成ref，就是響應(yīng)式的了
let {name1,age1} = storeToRefs(User)
 
// 改變store中值的方式有五種
// 方式一
function change1() {
    User.age++
}
// 方式二，可一次性修改多個值，對象的形式
function change2() {
    User.$patch({
        name: '雪見',
        age: 17
    })
}
// 方式三，可一次性修改多個值，函數(shù)的形式
function change3() {
    User.$patch((state) => {
        state.name = '徐長卿'
        state.age = 19
    })
}
// 方式四，哪怕修改一個值，也要傳所有值？？？
function change4() {
    User.$state = {
        name: '茂茂',
        age: 16,
        name1: '李逍遙',
        age1: 18
    }
}
// 方式五，借助actions
function change5() {
    User.setAge()
    //也可以傳參
    // User.setAge(999)
}
 
// 重置數(shù)據(jù)
function handleReset() {
    User.$reset()
}
 
</script>
 
<style>
</style>

到此這篇關(guān)于Vue3-pinia狀態(tài)管理的文章就介紹到這了,更多相關(guān)Vue3-pinia狀態(tài)管理內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: