快捷導(dǎo)航

Vue項(xiàng)目中是否使用store原理深究

更新時(shí)間：2022年11月07日 09:37:21 作者：腹黑霸道城鄉(xiāng)結(jié)合部王鐵牛

這篇文章主要為大家介紹了在Vue項(xiàng)目中是否使用store原理深究，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

前言

關(guān)于 Vue 項(xiàng)目中是否使用 store 的一些思考？

為什么會(huì)有這個(gè)問(wèn)題呢？

最近做項(xiàng)目的時(shí)候，使用 pinia 作為狀態(tài)管理庫(kù)，翻看 pinia 文檔的時(shí)候，發(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)一了語(yǔ)法，更符合開(kāi)發(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 的過(guò)程

const status = ref(false);
const setStatus = () => {
  status.value = !status.value;
};
export { status, setStatus };

在其他的組件中直接將 status 和 setStatus 引入，這樣寫法比 setup store 還要簡(jiǎn)單

那使用 store 的意義是什么呢？

兩種方式的區(qū)別

為什么要引入 store，大多數(shù)情況都是為了 全局狀態(tài)管理，方便了 跨組件通信，但是直接使用 組合式 api 也能完成這個(gè)任務(wù)。

這兩種方式有什么區(qū)別呢？

如果引入其他文件中定義的 簡(jiǎn)單數(shù)據(jù)類型 是 不允許修改 的

// 第一個(gè)文件
export let num = 0;
// 第二個(gè)文件
import { num } from '.';
num++; // error

import 為當(dāng)前模塊引入的變量都會(huì)被視作為常量

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)式的，但是不會(huì)被 pinia Devtools 工具檢測(cè)到