建站
咨詢
售后
建站咨詢
新聞中心
今天小編給大家分享一下Vue新一代的狀態(tài)管理庫(kù)Pinia怎么使用的相關(guān)知識(shí)點(diǎn)，內(nèi)容詳細(xì)，邏輯清晰，相信大部分人都還太了解這方面的知識(shí)，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來(lái)了解一下吧。
創(chuàng)新互聯(lián)建站是一家專注于成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作與策劃設(shè)計(jì),石城網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)建站做網(wǎng)站,專注于網(wǎng)站建設(shè)十多年,網(wǎng)設(shè)計(jì)領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:石城等地區(qū)。石城做網(wǎng)站價(jià)格咨詢:18982081108
什么是 Pinia
Pinia (西班牙語(yǔ)中的菠蘿)，本質(zhì)上依然是一個(gè)狀態(tài)管理的庫(kù)，用于跨組件、頁(yè)面進(jìn)行狀態(tài)共享。
pinia 與 vuex 的區(qū)別：
更友好的TypeScript支持，Vuex之前對(duì)TS的支持很不友好
與 Vuex 相比，Pinia 提供了一個(gè)更簡(jiǎn)單的 API，具有更少的儀式，提供了 Composition-API 風(fēng)格的 API
不再有modules的嵌套結(jié)構(gòu)
也不再有命名空間的概念，不需要記住它們的復(fù)雜關(guān)系
如何使用 Pinia
1、安裝 pinia
yarn add pinia
2、創(chuàng)建一個(gè)pinia
// src/stores/index.js
import { createPinia } from "pinia";
const pinia = createPinia()
export default pinia//main.js import pinia from './stores' app.use(pinia)
認(rèn)識(shí) Store
一個(gè) Store （如 Pinia）是一個(gè)實(shí)體，它會(huì)持有為綁定到你組件樹的狀態(tài)和業(yè)務(wù)邏輯，也就是保存了全局的狀態(tài)
這樣就可以定義任意數(shù)量的Store來(lái)管理你的狀態(tài)，包括
state、getters、actions
1. 定義一個(gè)store
Store 是使用 defineStore() 定義的，
且它需要一個(gè)唯一名稱，作為第一個(gè)參數(shù)傳遞
2. 使用 store
操作 State
state 是 store 的核心部分，store是用來(lái)實(shí)現(xiàn)我們管理狀態(tài)的。
方式一：直接一個(gè)個(gè)修改state
方式二：一次性修改多個(gè)狀態(tài)
方式三：替換state
方式四：重置state
.jpg)
.jpg)
.jpg)
.jpg)
Getters
1. 認(rèn)識(shí)和定義 Getters
Getters相當(dāng)于Store的計(jì)算屬性：
可以用 defineStore() 中的 getters 屬性定義；
getters中可以定義接受一個(gè)state作為參數(shù)的函數(shù)；
2. 訪問(wèn) Getters
方式一：訪問(wèn)當(dāng)前 store 的Getters
方式二：Getters 中訪問(wèn)自己的其他Getters
方式三：訪問(wèn)其他的 store 的Getters
getters: {
// 1. 基本使用
debouleCount(state) {
return state.count * 2
},
// 2. 一個(gè) getters 引入另外一個(gè) getters
useDebouleCount() {
return this.debouleCount + 2
},
// 3. getter也支持返回一個(gè)函數(shù)
getFriendById(state) {
return function (id) {
for (let i = 0; i < state.vagetabel.length; i++) {
const vagetabel = state.vagetabel[i]
if (vagetabel.id === id) {
return vagetabel }
}
}
},
// 4.訪問(wèn)其他store中的Getters
showMessage(state) {
// 獲取user信息
const useStore = useUser()
// 獲取自己的state
// 拼接信息
return `name:${useStore.name} - count:${state.count}`
}
}.jpg)
認(rèn)識(shí)和定義 Action
Action 可以理解成組件中的 methods ，和getters一樣，在action中可以通過(guò)this訪問(wèn)整個(gè)store實(shí)例的所有操作。
Action 是支持異步操作的，所以可以使用 await。
以上就是“Vue新一代的狀態(tài)管理庫(kù)Pinia怎么使用”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會(huì)為大家更新不同的知識(shí)，如果還想學(xué)習(xí)更多的知識(shí)，請(qǐng)關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
網(wǎng)頁(yè)題目：Vue新一代的狀態(tài)管理庫(kù)Pinia怎么使用
URL鏈接：http://www.dlmjj.cn/article/gijdhi.html
