快捷導(dǎo)航

vue3項目使用pinia狀態(tài)管理器的使用

更新時間：2024年05月28日 10:08:46 作者：我愛加班、、

Pinia是一個專為Vue3設(shè)計的現(xiàn)代化狀態(tài)管理庫,本文主要介紹了vue3項目使用pinia狀態(tài)管理器的使用,具有一定的參考價值,感興趣的可以了解一下

1、首先安裝pinia

yarn add pinia
# 或使用npm
npm install pinia

2、在項目的src目錄下新建store文件夾，然后store目錄下新建index.js / index.ts ：

我這里是index,js

import { createPinia } from "pinia"

// 創(chuàng)建 Pinia 實例
const pinia  = createPinia()

// 導(dǎo)出 Pinia 實例以便將其與應(yīng)用程序?qū)嵗P(guān)聯(lián)
export default pinia

3、接著在項目入口文件main.js 或 main.ts 引入并使用：

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router/router'
import store from './store/index'

createApp(App)
    .use(router)
    .use(store)
    .mount('#app')

4、然后使用defineStore來定義狀態(tài)存儲模塊，一般使用useXXXXXStore 來約定俗成的命名規(guī)范，我這里是user.js：

import { defineStore } from "pinia"

export const useUserStore = defineStore({
    //id 是為了更好地區(qū)分模塊
    id: 'user',
    state: () => ({
        name: 'Tony',
        age: 18,
        count: 0
    }),
    getters: {
        doubleCount: (state) => state.count * 2,
    },
    actions: {
        // 定義操作或異步請求
        increment() {
            // 這里訪問state的數(shù)據(jù)不再是state.XXX，而是通過this
            this.count++
        }
    }
})

5、在組件內(nèi)使用store：

<template>
  <div>
    <h3>我是測試pinia狀態(tài)存儲的組件，我有一個子組件</h3>
    <div>userStore里的state數(shù)據(jù)：</div>
    <span>姓名： {{ name }}</span>   <span>年齡： {{ age }}</span>
    <div><button @click="handleIncre">修改count:</button>count: {{ count }}</div>
    <!-- 直接調(diào)用getters的方法 -->
    <div> Double count is: {{ doubleCount }}</div>
  </div>
</template>

js:

<script setup>
import { ref, reactive } from 'vue'
import TestChild1 from './component/TestChild1.vue'
import { useUserStore } from '../../store/user';
import { storeToRefs } from 'pinia'

const userStore = useUserStore()
// 通過storeToRefs包裹，解構(gòu)出來的屬性/方法才有響應(yīng)式
const { name, age, count,  doubleCount} = storeToRefs(userStore)
// console.log('userStore:', userStore.name, userStore.age, userStore.count)
// console.log(name.value, age.value, count.value);

// 調(diào)用store的actions的increment方法
const handleIncre = () => {
    userStore.increment()
}

</script>

解構(gòu)store的變量或方法時，如果沒有通過storeToRefs包裹，就失去了響應(yīng)式：

具有響應(yīng)式：

6、在store中定義異步獲取用戶信息方法：

6.1首先新建一個api文件夾定義模擬異步登錄獲取用戶登錄信息接口方法：

~~src/api/index

// 模擬異步登錄獲取用戶信息
const loginUser = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve({
                name: 'Tony',
                age: 18
            })
        }, 2000)
    })
}

export default {
    loginUser
}

6.2 在store，user.js中：

引入api文件，在actions中定義getUserInfo方法，異步查詢時，通常都是async和await一起搭配使用的。

import { defineStore } from "pinia"
import API from '../api/index'

export const useUserStore = defineStore({
    //id 是為了更好地區(qū)分模塊
    id: 'user',
    state: () => ({
        name: 'Tony',
        age: 18,
        count: 0,
        userInfo: {}
    }),
    getters: {
        doubleCount: (state) => state.count * 2,
    },
    actions: {
        // 定義操作或異步請求
        increment() {
            // 這里訪問state的數(shù)據(jù)不再是state.XXX，而是通過this
            this.count++
        },
        // 在actions中異步獲取loginUser的數(shù)據(jù)
        async getUserInfo() {
            this.userInfo = await API.loginUser()
            console.log('user-info', this.userInfo);
        }
    }
})

6.3 在vue組件中使用：

<!-- 點擊---異步登錄獲取userInfo -->
    <button @click="getUser">異步登錄獲取userInfo</button>
    <div>userInfo: {{ userInfo }}</div>

// 調(diào)用store的actions的getUserInfo方法異步獲取用戶登錄信息
const getUser = () => {
  userStore.getUserInfo()
}

以上就是pinia的vue3使用，后面更新持續(xù)化存儲。更多相關(guān)vue3 pinia狀態(tài)管理器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章:

欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue3項目使用pinia狀態(tài)管理器的使用

相關(guān)文章

最新評論

大家感興趣的內(nèi)容

最近更新的內(nèi)容

常用在線小工具