【前言】
本系列為個人前端學習之路的學習筆記，在過往的學習過程中累積了很多筆記，如今想藉著IT邦幫忙這個平台做整理+再複習。
本系列標題一律以【】標示該篇文章主要涉及的內容，例如【JavaScript】、【Vue】等等。
若內容有誤，還麻煩各路大神不吝於點出問題，感激不敬。

在使用 Pinia 進行狀態管理時的情境

假設我們有 A 和 B 兩個 store，分別管理不同的狀態和行為：

export default defineStore('aStore', {
  state: () => ({
    storeName: 'A'
  }),
  actions: {
    aFn() {
      console.log('這是A Store的方法')
    }
  }
});

B store

export default defineStore('bStore', {
  state: () => ({
    storeName: 'B'
  }),
  actions: {
    bFn() {
      console.log('這是B Store的方法')
    }
  }
});

在一般情況下，我們會在 Vue 元件中將我們需要的部分引入，並分別執行
但有時候，我們需要在 A store 中調用 B store 的函式
例如，A store 負責管理購物車的資料狀態，負責所有有關購物車的程式邏輯
但當我們更新完購物車之後，我們需要發送一個 toast 作為給使用者的提示，而 toast 則是由 B store 所管理
這時，我們需要在 A store 中執行 B store的方法

在 A store 中調用 B store 的函式

那要怎麼調用呢，首先我們必須在 A store 中 import B store

import useBStore from './bStore'

這裡要注意的是，根據 bStore 的匯出方式，寫法會略有不同
因為我們使用 export default，所以是 import useBStore from './bStore'

然後就是透過 useBStore() 創建 bStore 的實例，最後 bStore.對應函式名稱()

全部會像是這樣：

import useBStore from './bStore'
export default defineStore('aStore', {
  state: () => ({
    storeName: 'A'
  }),
  actions: {
    aFn() {
      const bStore = useBStore();
      bStore.bFn(); //這是B Store的方法
    }
  }
});

小結

這樣一來，我們便能在 A store 中順利調用 B store 的函式，實現跨 store 的操作。這在一些需要跨 store 操作的情況中非常有用。