知識回調(diào)（不懂就看這兒?。?/h2>
| 知識專欄 | 專欄鏈接 |
|---|---|
| Vuex知識專欄 | https://blog.csdn.net/xsl_hr/category_12158336.html?spm=1001.2014.3001.5482 |
| Vuex官方文檔 | https://vuex.vuejs.org/zh/ |
| Pinia官方文檔 | https://pinia.web3doc.top/ |
場景復(fù)現(xiàn)
最近在前端的深入學(xué)習(xí)過程中，接觸了與狀態(tài)管理相關(guān)的內(nèi)容，涉及到與vue2適配的vuex和與vue3適配的pinia，因此計劃分別用幾篇文章總結(jié)一下最近的學(xué)習(xí)筆記，從了解到實際運用vue的狀態(tài)管理工具。
本期文章將介紹pinia的入門知識
什么是pinia
pinia其實就是vuex5，這是pinia其實就是Vuex5,這是尤雨溪老師在直播中提到的，所以它倆是一致的東西，只是vuex第五個版本之后就叫pinia了。
pinia相比vuex的優(yōu)勢
pinia相比vuex4之前的優(yōu)勢：
mutations不再存在。帶來了devtools集成??！- 無需創(chuàng)建自定義復(fù)雜包裝器來支持
TypeScript，所有內(nèi)容都是類型化的，并且 API 的設(shè)計方式盡可能利用 TS 類型推斷。- 不再需要注入、導(dǎo)入函數(shù)、調(diào)用函數(shù)、享受自動完成功能！
- 無需動態(tài)添加 Store，默認(rèn)情況下它們都是動態(tài)的！
- 不再有
modules的嵌套結(jié)構(gòu)。您仍然可以通過在另一個 Store 中導(dǎo)入和 使用 來隱式嵌套 Store，但 Pinia 通過設(shè)計提供平面結(jié)構(gòu)，同時仍然支持 Store 之間的交叉組合方式。 您甚至可以擁有 Store 的循環(huán)依賴關(guān)系。- 沒有
命名空間模塊。鑒于 Store 的扁平架構(gòu)，“命名空間” Store 是其定義方式所固有的，您可以說所有 Store 都是命名空間的。
總的來說，如果你是一個vue3和TypeScript的重度愛好者，那么pinia可以直接閉眼使用了，相對之前版本的vuex，pinia絕對會給你帶來意想不到的體驗?。。?/p>
為什么要使用pinia？
Pinia 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)。 如果您熟悉 Composition API，您可能會認(rèn)為您已經(jīng)可以通過一個簡單的 export const state = reactive({})。這對于單頁應(yīng)用程序來說是正確的，但如果它是服務(wù)器端呈現(xiàn)的，會使您的應(yīng)用程序暴露于安全漏洞。 但即使在小型單頁應(yīng)用程序中，您也可以從使用 Pinia 中獲得很多好處：
基本示例
下面我們來看看在api方面使用pinia的例子：??????
首先創(chuàng)建一個store實例，寫入基礎(chǔ)的數(shù)據(jù)和邏輯
// stores/counter.js
import { defineStore } from 'pinia'
export const useCounterStore = defineStore('counter', {
state: () => {
return { count: 0 }
},
// 也可以定義為
// state: () => ({ count: 0 })
actions: {
increment() {
this.count++
},
},
})
然后在一個組件中使用store實例：
import { useCounterStore } from '@/stores/counter'
export default {
setup() {
const counter = useCounterStore()
counter.count++
counter.$patch({ count: counter.count + 1 })
// 或使用 action 代替
counter.increment()
},
}
當(dāng)然，我們還可以用一個函數(shù)來定義一個更高級的store：
export const useCounterStore = defineStore('counter', () => {
const count = ref(0)
function increment() {
count.value++
}
return { count, increment }
})
下面我們來看看使用pinia的一個完整示例：
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 會自動推斷為 number
nextId: 0,
}),
getters: {
finishedTodos(state) {
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') {
// 自動調(diào)用其他 getter
return this.finishedTodos
} else if (this.filter === 'unfinished') {
return this.unfinishedTodos
}
return this.todos
},
},
actions: {
// 任何數(shù)量的參數(shù)，返回一個 Promise 或者不返回
addTodo(text) {
// 你可以直接改變狀態(tài)
this.todos.push({ text, id: this.nextId++, isFinished: false })
},
},
})
以上就是關(guān)于實現(xiàn)pinia一些基礎(chǔ)知識的分享，相信看完這篇文章的小伙伴們一定能運用這些方法在項目開發(fā)中。當(dāng)然，可能有不足的地方，歡迎大家在評論區(qū)留言指正！文章來源：http://www.zghlxwxcb.cn/news/detail-435392.html
文章來源地址http://www.zghlxwxcb.cn/news/detail-435392.html
到了這里，關(guān)于Vue最新狀態(tài)管理工具Pinia——徹底搞懂Pinia是什么的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
