目录

1 前言

2 使用步骤

2.1 安装pinia

 2.2 定义一个store

2.3 在父组件即index.vue中调用方法

2.4 子组件使用获取到的值

---

1 前言

在我们的页面中常常存在多个组件，多个组件可能会对某个接口发送多次请求，为了避免这种情况，我们就需要使用pinia来解决该问题。

2 使用步骤

2.1 安装pinia

在命令提示符窗口，输入如下指令安装pinia：

npm install pinia

 2.2 定义一个store

 假设我们需要获取一个分类列表，这就是被我们重复调用的部分，现在我们先定义一个store，包含获取List的方法和List。

//导入pinia
import { defineStore } from 'pinia'
import {ref} from "vue";
//导入我们自定义的API接口
import {getCategoryAPI} from "@/apis/layout.js";//'category'为独一无二的名字
export const useCategoryStore = defineStore('category', () => {//需要的值const categoryList = ref([])//获取List的方法const getCategory = async () => {const res = await getCategoryAPI()categoryList.value = res.result}//返回方法和所需Listreturn {categoryList,getCategory}
})

2.3 在父组件即index.vue中调用方法

<script setup>
//其它代码
//导入我们刚才定义的store
import {useCategoryStore} from "@/stores/category.js";
import {onMounted} from "vue";const categoryStore = useCategoryStore()//调用方法获取List
onMounted(() => {categoryStore.getCategory()
})
</script><template><!--其它子组件--><LayoutHeader /><RouterView /><LayoutFooter />
</template>

2.4 子组件使用获取到的值

<script setup>
//使用pinia中的数据
import {useCategoryStore} from "@/stores/category.js";
const categoryStore = useCategoryStore()
</script><template><!--其它代码-->
</template><style scoped lang='scss'>
//其它代码
</style>