您好,登錄后才能下訂單哦!
今天小編給大家分享一下Vue新一代的狀態(tài)管理庫(kù)Pinia怎么使用的相關(guān)知識(shí)點(diǎn),內(nèi)容詳細(xì),邏輯清晰,相信大部分人都還太了解這方面的知識(shí),所以分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后有所收獲,下面我們一起來(lái)了解一下吧。
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)系
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)
一個(gè) Store (如 Pinia)是一個(gè)實(shí)體,它會(huì)持有為綁定到你組件樹(shù)的狀態(tài)和業(yè)務(wù)邏輯,也就是保存了全局的狀態(tài)
這樣就可以定義任意數(shù)量的Store來(lái)管理你的狀態(tài),包括
state、getters、actions
Store 是使用 defineStore() 定義的,
且它需要一個(gè)唯一名稱(chēng),作為第一個(gè)參數(shù)傳遞
state 是 store 的核心部分,store是用來(lái)實(shí)現(xiàn)我們管理狀態(tài)的。
方式一:直接一個(gè)個(gè)修改state
方式二:一次性修改多個(gè)狀態(tài)
方式三:替換state
方式四:重置state
Getters相當(dāng)于Store的計(jì)算屬性:
可以用 defineStore() 中的 getters 屬性定義;
getters中可以定義接受一個(gè)state作為參數(shù)的函數(shù);
方式一:訪問(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}` } }
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)注億速云行業(yè)資訊頻道。
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。