Vue項(xiàng)目中是否使用store原理深究
前言
關(guān)于 Vue 項(xiàng)目中是否使用 store 的一些思考?
為什么會有這個問題呢?
最近做項(xiàng)目的時候,使用 pinia
作為狀態(tài)管理庫,翻看 pinia
文檔的時候,發(fā)現(xiàn) pinia
創(chuàng)建 store
多了一種 setup store 的方式
setup store
const useStore = defineStore('store', () => { const status = ref(false); const setStatus = () => { status.value = !status.value; }; const number = computed(() => Number(status.value)); return { status, setStatus, number, }; });
setup store
與 vue
的 響應(yīng)式 api 結(jié)合在一起使用,相較于原先的 選項(xiàng)式 api 統(tǒng)一了語法,更符合開發(fā)者習(xí)慣
使用 store
:
const store = useStore() console.log(store.status); // false console.log(store.number); // 0 store.setStatus(); console.log(store.status); // true console.log(store.number); // 1
這樣的寫法很棒!
但是我們?yōu)槭裁匆啻我慌e使用 store
,為何不在其他文件直接使用 組合式 api 定義數(shù)據(jù)和修改數(shù)據(jù)的方法,非要包裹一層創(chuàng)建 store
的過程
const status = ref(false); const setStatus = () => { status.value = !status.value; }; export { status, setStatus };
在其他的組件中直接將 status
和 setStatus
引入,這樣寫法比 setup store
還要簡單
那使用 store
的意義是什么呢 ?
兩種方式的區(qū)別
為什么要引入 store
,大多數(shù)情況都是為了 全局狀態(tài)管理,方便了 跨組件通信,但是直接使用 組合式 api 也能完成這個任務(wù)。
這兩種方式有什么區(qū)別呢?
如果引入其他文件中定義的 簡單數(shù)據(jù)類型 是 不允許修改 的
// 第一個文件 export let num = 0; // 第二個文件 import { num } from '.'; num++; // error
import
為當(dāng)前模塊引入的變量都會被視作為 常量
setup store
相比 組合式 api 擁有更強(qiáng)大的地方:
const useStore = defineStore('store', () => { const num1 = ref(0); const num2 = 0; // 非響應(yīng)式 return { num1, num2, }; }); const store = useStore(); store.num1++; store.num2++; // 響應(yīng)式 console.log(store.num1); // 1 console.log(store.num2); // 1
基本數(shù)據(jù)類型和響應(yīng)式數(shù)據(jù)都可以更改,基本數(shù)據(jù)可以修改,也可以引起視圖的變化,在 store
外部調(diào)用是響應(yīng)式的,但在 store
內(nèi)部不是響應(yīng)式的,但是不會被 pinia Devtools
工具檢測到
這是兩種方式在使用體驗(yàn)上面的區(qū)別
store 究竟帶來了什么?
在 Pinia 官網(wǎng) 中有這么一段話
在很多時候,其實(shí)是體驗(yàn)不到 pinia
帶來的好處,所以可以完全使用 組合式 api 作為全局狀態(tài)管理的工具
以上就是Vue項(xiàng)目中是否使用store原理深究的詳細(xì)內(nèi)容,更多關(guān)于Vue項(xiàng)目store使用原理的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
vue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法
下面小編就為大家?guī)硪黄獀ue-router2.0 組件之間傳參及獲取動態(tài)參數(shù)的方法。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2017-11-11Vue項(xiàng)目History模式404問題解決方法
本文主要解決Vue項(xiàng)目使用History模式發(fā)布到服務(wù)器Nginx上刷新頁面404問題。小編覺得挺不錯的,現(xiàn)在分享給大家,也給大家做個參考。一起跟隨小編過來看看吧2018-10-10Vue+Element實(shí)現(xiàn)動態(tài)生成新表單并添加驗(yàn)證功能
這篇文章主要介紹了Vue+Element實(shí)現(xiàn)動態(tài)生成新表單并添加驗(yàn)證功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05laravel5.3 vue 實(shí)現(xiàn)收藏夾功能實(shí)例詳解
這篇文章主要介紹了laravel5.3 vue 實(shí)現(xiàn)收藏夾功能,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),需要的朋友可以參考下2018-01-01vue使用websocket實(shí)現(xiàn)實(shí)時數(shù)據(jù)推送功能
這篇文章主要為大家詳細(xì)介紹了vue如何使用websocket實(shí)現(xiàn)實(shí)時數(shù)據(jù)推送,發(fā)布訂閱重連單點(diǎn)登錄功能,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2023-12-12