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 pinia3、 接著在項目入口文件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)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vite是一個基于Vue3單文件組件的非打包開發(fā)服務(wù)器,它具有快速的冷啟動,不需要等待打包操作,下面這篇文章主要給大家介紹了關(guān)于vite+vue3+ts項目新建以及解決遇到的問題的相關(guān)資料,需要的朋友可以參考下2023-06-06
前端vue3使用SSE、EventSource攜帶請求頭實例代碼
這篇文章主要介紹了前端vue3使用SSE、EventSource攜帶請求頭的相關(guān)資料,SSE是基于HTTP的服務(wù)器向客戶端推送數(shù)據(jù)技術(shù),實現(xiàn)單向?qū)崟r通信,輕量級且支持跨域、自動重連,文中將實現(xiàn)的方法介紹的非常詳細(xì),需要的朋友可以參考下2025-06-06
這篇文章主要介紹了Vue數(shù)據(jù)劫持詳情介紹，文章圍繞主題展開詳細(xì)的內(nèi)容介紹，具有一定的參考價值，感興趣的小伙伴可以參考一下，希望對你的學(xué)習(xí)有所幫助2022-08-08
這篇文章主要介紹了Vue v-text指令簡單使用方法,結(jié)合實例形式分析了v-text指令文本輸出顯示簡單操作技巧,需要的朋友可以參考下2019-09-09
Vue表單校驗規(guī)則（rules）是一種用于驗證表單數(shù)據(jù)的對象,它通常用于Vue.js框架中的表單組件中,可以在表單提交前進(jìn)行數(shù)據(jù)驗證,這篇文章主要給大家介紹了關(guān)于Vue.js?rules校驗規(guī)則的相關(guān)資料,需要的朋友可以參考下2024-02-02
Pinia是Vue的存儲庫,它允許您跨組件/頁面共享狀態(tài),下面這篇文章主要給大家介紹了Pinia中action使用方法的相關(guān)資料,文中通過實例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
這篇文章主要為大家詳細(xì)介紹了如何使用html+vue實現(xiàn)簡單的分頁功能,文中的示例代碼簡潔易懂,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-04-04
這篇文章主要介紹了Vue項目中安裝插件的命令及區(qū)別說明,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2025-06-06
Vue父組件調(diào)用子組件函數(shù)實現(xiàn)
這篇文章主要介紹了Vue父組件調(diào)用子組件函數(shù)實現(xiàn)，全文通過舉例子及代碼的形式進(jìn)行了一個簡單的介紹，希望大家能夠理解并且學(xué)習(xí)到其中知識2021-08-08
這篇文章主要介紹了vue npm install 安裝某個指定的版本操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-08-08