最具有爭(zhēng)議的Pinia和Vuex那個(gè)更好？
我們使用Vue2的時(shí)候，Vuex作為一個(gè)狀態(tài)管理工具在組件中使用方便了很多。Vue3推出后，雖然相對(duì)于Vue2很多東西都變了，但是核心的東西還是沒有變的，比如說狀態(tài)管理、路由等等。實(shí)際上，pinia就是Vuex的升級(jí)版，官網(wǎng)也說過，為了尊重原作者，所以取名pinia，而沒有取名Vuex，所以大家可以直接將pinia比作為Vue3的Vuex。
以上可以看出 pinia更適合于Vue3中作為狀態(tài)管理
Pinia的優(yōu)點(diǎn)
- pinia中只有state、getter、action，拋棄了Vuex中的Mutation
- pinia中action支持同步和異步，Vuex不支持
- Typescript支持，畢竟我們Vue3都推薦使用TS來編寫
- 體積小，1KB左右。
- pinia支持插件來擴(kuò)展自身功能。
- 可以服務(wù)端渲染。
以上來看對(duì)于 Pinia的概念，state、getters 和 actions 并且可以安全地假設(shè)這些概念等同于組件中的“數(shù)據(jù)”、“計(jì)算”和“方法”。
那么什么時(shí)候該用到Pinia呢
存儲(chǔ)應(yīng)該包含可以在整個(gè)應(yīng)用程序中訪問的數(shù)據(jù)。這包括在許多地方使用的數(shù)據(jù)，例如導(dǎo)航欄中顯示的用戶信息，以及需要通過頁面保留的數(shù)據(jù)，例如一個(gè)非常復(fù)雜的多步驟表格。
簡(jiǎn)單的理解就是 當(dāng)我們需要在項(xiàng)目中需要全局管理一下數(shù)據(jù)就可以考慮使用
vue3+TS 更使用于使用pinia
使用Pinia
1.安裝
yarn add pinia
# 或者使用 npm
npm install pinia
2.創(chuàng)建一個(gè) pinia（根存儲(chǔ)）并將其傳遞給應(yīng)用程序：
一般是在 stores文件里億點(diǎn)小知識(shí)：如果使用 Vue 2，還需要安裝組合 API：@vue/composition-api
import { createPinia } from "pinia";
import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
const pinia = createPinia();
pinia.use(piniaPluginPersistedstate);
export default pinia;
3.在main.js中引入pinia
import pinia from "@/stores";
app.use(pinia).mount("#app");
4.持久化策略 這個(gè)如果不需要也不可以不設(shè)置
import { PersistedStateOptions } from "pinia-plugin-persistedstate";
/**
* @description pinia 持久化參數(shù)配置
* @param {String} key 存儲(chǔ)到持久化的 name
* @param {Array} paths 需要持久化的 state name
* @return persist
* */
const piniaPersistConfig = (key: string, paths?: string[]) => {
const persist: PersistedStateOptions = {
key,
storage: localStorage,
// storage: sessionStorage,
paths
};
return persist;
};
export default piniaPersistConfig;
5.在stores中創(chuàng)建一個(gè)modules 用來區(qū)分文章來源：http://www.zghlxwxcb.cn/news/detail-560868.html
import { defineStore } from "pinia";
import { GlobalState } from "@/stores/interface";// TS 規(guī)范
import piniaPersistConfig from "@/config/piniaPersist";
export const useGlobalStore = defineStore({
id: "geeker-global",
// 修改默認(rèn)值之后，需清除 localStorage 數(shù)據(jù)
state: (): GlobalState => ({
// 面包屑導(dǎo)航
breadcrumb: true,
// 面包屑導(dǎo)航圖標(biāo)
breadcrumbIcon: true,
// 標(biāo)簽頁
tabs: true,
// 標(biāo)簽頁圖標(biāo)
tabsIcon: true,
// 頁腳
footer: true
}),
getters: {},
actions: {
// Set GlobalState
setGlobalState(...args: ObjToKeyValArray<GlobalState>) {
this.$patch({ [args[0]]: args[1] });
}
},
persist: piniaPersistConfig("geeker-global") // 持久化處理
});
以上就是簡(jiǎn)單的使用 Pinia狀態(tài)管理了
以上就是Pinia和Vuex詳解感謝大家的閱讀
如碰到其他的問題 可以私下我 一起探討學(xué)習(xí)
如果對(duì)你有所幫助還請(qǐng) 點(diǎn)贊 收藏謝謝~！
關(guān)注收藏博客 作者會(huì)持續(xù)更新…文章來源地址http://www.zghlxwxcb.cn/news/detail-560868.html
到了這里，關(guān)于vue中使用Pinia和Vuex詳解的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
