pinia优化重复请求

目录

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
    }
    //返回方法和所需List
    return {
        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>