一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第23天，点击查看活动详情。

pinia-学习之路 06，store的互相调用

引言

本系列会以我的一个理解，来介绍并开始学习 Pinia。

中间会插入自己所联系到的 乱七八糟 的 知识点。

store的互相调用

我们在之前对 store 进行了讲解和使用，现在再进行一个补充，就是学习下 store 文件夹下，如果有两个文件，而且一个文件里面的方法，需要用到另一个文件的值，这种情况。

也就是一个文件可以调取另一个文件的 state 值。

在 store 目录文件夹下创建一个 list.ts 文件，里面的内容如下。

import { defineStore } from 'pinia'

export const listStore = defineStore('list', {
  state: () => {
    return {
      list: [{ id: 1 }, { id: 2 }, { id: 3 }]
    }
  },
  getters: {},
  actions: {}
})

之后，在与之同级目录下的 index.ts 文件中，来进行引入 listStore，并在 actions 中创建一个新的方法，来进行调用和输出结果，代码如下：

import { listStore } from './list'

  actions: {
    getListLength() {
      const { list } = listStore()
      console.log(list.length)
    }
  }

上面两个 store 文件均已初始化完毕，接下来就可以在我们的 view 目录下的 hello.vue 中进行引入 index.ts 文件中导出的 mainStore

这里有个注意点，再对 mainStore 进行解构赋值的时候，如果还是用下面这种 storeToRefs 方式是会报错的，

let { hello: myHello, getListLength } = storeToRefs(store)

因为 getListLength 只是一个方法，它并不是响应式的数据。所以我们在进行解构赋值的时候，应该单独处理

let { hello: myHello } = storeToRefs(store)
let { getListLength } = store

这样就解构出来我们的方法，此时创建一个 button 点击事件，来得到我们的数组 list 的长度值

<div>{{ myHello }}</div>
<br />
<button @click="useGetListLength">点我main，调用list</button>

const useGetListLength = () => {
  getListLength()
}

可以通过gif图可知，我们点击后，当前引入的 index.ts 的内容，引用了 list.ts 里面的 state 值。完成了多个 store 的互相调用

总结

学习了 Pinia 中的 多文件的 store 的互相调用，以及在使用 storeToRefs 时，注意是否是响应式。