【Pinia】在store中调用其他store的资料

【前言】本系列为个人前端学习之路的学习笔记，在过往的学习过程中累积了很多笔记，如今想借着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 操作的情况中非常有用。