Vue項目中是否使用store原理深究
前言
關于 Vue 項目中是否使用 store 的一些思考？
為什么會有這個問題呢？
最近做項目的時候，使用 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 的 響應式 api 結合在一起使用，相較于原先的 選項式 api 統(tǒng)一了語法，更符合開發(fā)者習慣
使用 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 也能完成這個任務。
這兩種方式有什么區(qū)別呢？
如果引入其他文件中定義的 簡單數(shù)據(jù)類型 是 不允許修改 的
// 第一個文件
export let num = 0;
// 第二個文件
import { num } from '.';
num++; // error
import 為當前模塊引入的變量都會被視作為 常量
setup store 相比 組合式 api 擁有更強大的地方：
const useStore = defineStore('store', () => {
const num1 = ref(0);
const num2 = 0; // 非響應式
return {
num1,
num2,
};
});
const store = useStore();
store.num1++;
store.num2++; // 響應式
console.log(store.num1); // 1
console.log(store.num2); // 1
基本數(shù)據(jù)類型和響應式數(shù)據(jù)都可以更改，基本數(shù)據(jù)可以修改，也可以引起視圖的變化，在 store 外部調用是響應式的，但在 store 內部不是響應式的，但是不會被 pinia Devtools 工具檢測到
這是兩種方式在使用體驗上面的區(qū)別
store 究竟帶來了什么？
在 Pinia 官網 中有這么一段話
在很多時候，其實是體驗不到 pinia 帶來的好處，所以可以完全使用 組合式 api 作為全局狀態(tài)管理的工具
以上就是Vue項目中是否使用store原理深究的詳細內容，更多關于Vue項目store使用原理的資料請關注腳本之家其它相關文章！
相關文章
這篇文章主要介紹了Vue移動端下拉刷新組件的使用教程，每一次我在使用vant組件庫里面list組件和下拉刷新連在一起用的時候都會出現(xiàn)下拉刷新和列表下滑局部滾動的沖突，這就很難受，這篇文章將解決它2023-04-04
近期學習vue3的父子組件之間的傳值,發(fā)現(xiàn)跟vue2的并沒有太大的區(qū)別,這篇文章主要給大家介紹了關于Vue3子組件向父組件傳值的兩種實現(xiàn)方式,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-04-04
vue常用指令實現(xiàn)學生錄入系統(tǒng)的實戰(zhàn)
本文主要介紹了vue常用指令實現(xiàn)學生錄入系統(tǒng)的實戰(zhàn)，文中通過示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-02-02
Vue.js實現(xiàn)"一個文件對應一個組件"，無需webpack等工具，按需加載組件,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
Moment.js 是一個 JavaScript 日期處理類庫，用于解析、檢驗、操作、以及顯示日期。這篇文章主要給大家介紹了關于vue利用Moment插件格式化時間的相關資料,需要的朋友可以參考下2021-05-05
NProgress.js是輕量級的進度條組件，使用簡便，可以很方便集成到單頁面應用中。這篇文章主要介紹了在vue項目中使用Nprogress.js進度條的方法,需要的朋友可以參考下2018-01-01
Vue + iView實現(xiàn)Excel上傳功能的完整代碼
前一段時間項目經歷了前端上傳文件的過程，首先進入頁面會展示默認的樣子，選中要上傳的excel文件，本文通過實例圖文相結合給大家介紹的非常詳細，需要的朋友參考下吧2021-06-06
Vue 初始化時就會通過 Object.defineProperty 攔截屬性的 getter 和 setter ，為對象的每個值創(chuàng)建一個 dep 并用 Dep.addSub() 來存儲該屬性值的 watcher 列表，這篇文章主要介紹了Vue?響應式系統(tǒng)依賴收集過程分析,需要的朋友可以參考下2022-06-06
這篇文章主要給大家介紹了關于通用vue組件化登錄頁面的相關資料,文中通過圖文以及實例代碼將解決的辦法介紹的非常詳細,對大家學習或者使用vue具有一定的參考學習價值,需要的朋友可以參考下2023-08-08
下面小編就為大家分享一篇vue.js移動數(shù)組位置,同時更新視圖的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03