這篇文章主要介紹了Vue中如何使用pinia的相關(guān)知識(shí)，內(nèi)容詳細(xì)易懂，操作簡(jiǎn)單快捷，具有一定借鑒價(jià)值，相信大家閱讀完這篇Vue中如何使用pinia文章都會(huì)有所收獲，下面我們一起來(lái)看看吧。
績(jī)溪網(wǎng)站建設(shè)公司成都創(chuàng)新互聯(lián)公司,績(jī)溪網(wǎng)站設(shè)計(jì)制作，有大型網(wǎng)站制作公司豐富經(jīng)驗(yàn)。已為績(jī)溪1000+提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站制作要多少錢(qián)，請(qǐng)找那個(gè)售后服務(wù)好的績(jī)溪做網(wǎng)站的公司定做！
Pinia最初是在 2019 年 11 月左右重新設(shè)計(jì)使用 Composition API的 Vue Store 外觀的實(shí)驗(yàn)。從那時(shí)起，最初的原則仍然相同，但 Pinia 適用于 Vue 2 和 Vue 3 ，并且不需要你使用組合 API。除了安裝和SSR之外，兩者的 API 都是相同的，并且這些文檔針對(duì) Vue 3 ，并在必要時(shí)提供有關(guān) Vue 2 的注釋?zhuān)员?Vue 2 和 Vue 3 用戶(hù)可以閱讀！
Pinia 是 Vue 的存儲(chǔ)庫(kù)，它允許您跨組件/頁(yè)面共享狀態(tài)。? 這對(duì)于單頁(yè)應(yīng)用程序來(lái)說(shuō)是正確的，但如果它是服務(wù)器端呈現(xiàn)的，則會(huì)將您的應(yīng)用程序暴露給安全漏洞。但即使在小型單頁(yè)應(yīng)用程序中，您也可以從使用 Pinia 中獲得很多好處：
開(kāi)發(fā)工具支持
跟蹤動(dòng)作、突變的時(shí)間表
商店出現(xiàn)在使用它們的組件中
時(shí)間旅行和更容易的調(diào)試
熱模塊更換
在不重新加載頁(yè)面的情況下修改您的商店
在開(kāi)發(fā)時(shí)保持任何現(xiàn)有狀態(tài)
插件：使用插件擴(kuò)展 Pinia 功能
為 JS 用戶(hù)提供適當(dāng)?shù)?TypeScript 支持或自動(dòng)完成功能
服務(wù)器端渲染支持
這就是使用 pinia 在 API 方面的樣子（請(qǐng)務(wù)必查看入門(mén)以獲取完整說(shuō)明）。您首先創(chuàng)建一個(gè)商店：
重慶分公司
重慶分公司
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
// could also be defined as
// state: () => ({ count: 0 })
actions: {
increment() {
this.count++
},
},
})然后在組件中使用它：
import { useCounterStore } from '@/stores/counter'
export default {
setup() {
const counter = useCounterStore()
counter.count++
// with autocompletion ?
counter.$patch({ count: counter.count + 1 })
// or using an action instead
counter.increment()
},
}你甚至可以使用一個(gè)函數(shù)（類(lèi)似于一個(gè)組件setup()）來(lái)為更高級(jí)的用例定義一個(gè) Store：
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
})如果您仍然不熟悉setup()Composition API，請(qǐng)不要擔(dān)心，Pinia 還支持一組類(lèi)似的地圖助手，例如 Vuex。您以相同的方式定義存儲(chǔ)，但隨后使用mapStores()、mapState()或mapActions()：
const useCounterStore = defineStore('counter', {
state: () => ({ count: 0 }),
getters: {
double: (state) => state.count * 2,
},
actions: {
increment() {
this.count++
}
}
})
const useUserStore = defineStore('user', {
// ...
})
export default {
computed: {
// other computed properties
// ...
// gives access to this.counterStore and this.userStore
...mapStores(useCounterStore, useUserStore)
// gives read access to this.count and this.double
...mapState(useCounterStore, ['count', 'double']),
},
methods: {
// gives access to this.increment()
...mapActions(useCounterStore, ['increment']),
},
}您將在核心概念中找到有關(guān)每個(gè)地圖助手的更多信息。
Pinia（發(fā)音為/pi?nj?/，如英語(yǔ)中的“peenya”）是最接近pi?a（西班牙語(yǔ)中的菠蘿）的詞，它是一個(gè)有效的包名稱(chēng)。菠蘿實(shí)際上是一組單獨(dú)的花朵，它們結(jié)合在一起形成多個(gè)水果。與商店類(lèi)似，每一家都是獨(dú)立誕生的，但最終都是相互聯(lián)系的。它也是一種美味的熱帶水果，原產(chǎn)于南美洲。
這是一個(gè)更完整的 API 示例，您將在 Pinia中使用類(lèi)型，即使在 JavaScript 中也是如此。對(duì)于某些人來(lái)說(shuō)，這可能足以在不進(jìn)一步閱讀的情況下開(kāi)始使用，但我們?nèi)匀唤ㄗh您查看文檔的其余部分，甚至跳過(guò)此示例并在閱讀完所有核心概念后返回。
import { defineStore } from 'pinia'
export const todos = defineStore('todos', {
state: () => ({
/** @type {{ text: string, id: number, isFinished: boolean }[]} */
todos: [],
/** @type {'all' | 'finished' | 'unfinished'} */
filter: 'all',
// type will be automatically inferred to number
nextId: 0,
}),
getters: {
finishedTodos(state) {
// autocompletion! ?
return state.todos.filter((todo) => todo.isFinished)
},
unfinishedTodos(state) {
return state.todos.filter((todo) => !todo.isFinished)
},
/**
* @returns {{ text: string, id: number, isFinished: boolean }[]}
*/
filteredTodos(state) {
if (this.filter === 'finished') {
// call other getters with autocompletion ?
return this.finishedTodos
} else if (this.filter === 'unfinished') {
return this.unfinishedTodos
}
return this.todos
},
},
actions: {
// any amount of arguments, return a promise or not
addTodo(text) {
// you can directly mutate the state
this.todos.push({ text, id: this.nextId++, isFinished: false })
},
},
})Pinia 試圖盡可能地接近 Vuex 的理念。它旨在測(cè)試 Vuex 下一次迭代的提案，并且取得了成功，因?yàn)槲覀兡壳坝幸粋€(gè)針對(duì) Vuex 5 的開(kāi)放 RFC，其 API 與 Pinia 使用的 API 非常相似。請(qǐng)注意，我 (Eduardo)，Pinia 的作者，是 Vue.js 核心團(tuán)隊(duì)的一員，并積極參與了 Router 和 Vuex 等 API 的設(shè)計(jì)。我個(gè)人對(duì)這個(gè)項(xiàng)目的意圖是重新設(shè)計(jì)使用全球商店的體驗(yàn)，同時(shí)保持 Vue 的平易近人的理念。我保持 Pinia 的 API 與 Vuex 一樣接近，因?yàn)樗粩嘞蚯鞍l(fā)展，以使人們更容易遷移到 Vuex，甚至在未來(lái)融合兩個(gè)項(xiàng)目（在 Vuex 下）。
雖然 Vuex 通過(guò) RFC 從社區(qū)收集盡可能多的反饋，但 Pinia 沒(méi)有。我根據(jù)我開(kāi)發(fā)應(yīng)用程序、閱讀其他人的代碼、為使用 Pinia 的客戶(hù)工作以及在 Discord 上回答問(wèn)題的經(jīng)驗(yàn)來(lái)測(cè)試想法。這使我能夠提供一種適用于各種情況和應(yīng)用程序大小的有效解決方案。我經(jīng)常發(fā)布并在保持其核心 API 不變的同時(shí)使庫(kù)不斷發(fā)展。
Vuex 3.x 是 Vuex 的 Vue 2 而 Vuex 4.x 是 Vue 3
Pinia API 與 Vuex ≤4 有很大不同，即：
突變不再存在。他們經(jīng)常被認(rèn)為是非常冗長(zhǎng)的。他們最初帶來(lái)了 devtools 集成，但這不再是問(wèn)題。
無(wú)需創(chuàng)建自定義復(fù)雜包裝器來(lái)支持 TypeScript，所有內(nèi)容都是類(lèi)型化的，并且 API 的設(shè)計(jì)方式盡可能利用 TS 類(lèi)型推斷。
不再需要注入魔法字符串、導(dǎo)入函數(shù)、調(diào)用它們，享受自動(dòng)完成功能！
無(wú)需動(dòng)態(tài)添加商店，默認(rèn)情況下它們都是動(dòng)態(tài)的，您甚至都不會(huì)注意到。請(qǐng)注意，您仍然可以隨時(shí)手動(dòng)使用商店進(jìn)行注冊(cè)，但因?yàn)樗亲詣?dòng)的，您無(wú)需擔(dān)心。
不再有模塊的嵌套結(jié)構(gòu)。您仍然可以通過(guò)在另一個(gè)商店中導(dǎo)入和使用商店來(lái)隱式嵌套商店，但 Pinia 通過(guò)設(shè)計(jì)提供平面結(jié)構(gòu)，同時(shí)仍然支持商店之間的交叉組合方式。你甚至可以有 store 的循環(huán)依賴(lài)。
沒(méi)有命名空間的模塊。鑒于商店的扁平架構(gòu)，“命名空間”商店是其定義方式所固有的，您可以說(shuō)所有商店都是命名空間的。
關(guān)于“Vue中如何使用pinia”這篇文章的內(nèi)容就介紹到這里，感謝各位的閱讀！相信大家對(duì)“Vue中如何使用pinia”知識(shí)都有一定的了解，大家如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。
