用Pinia在vue3中实现axios请求

简介：Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态。类似于vuex。不过相较于vuex又有所不同。主要体现在pinia在构建store中只用到state，getter，action就可以实现对axios的请求。

话不多说，直接上代码:

1. 安装

yarn add pinia
# 或者使用 npm
npm install pinia

2.在src下创建一个store文件夹，并在文件夹内创建一个index.js

3.store中的index.js的构建如下：

import { defineStore } from 'pinia';
import axios from "axios"

const useAlertsStore = defineStore('useUserStore', {
    state() {
        return {
            trainList: []
        }
    },
    getters: {
        GET_TRAIN() {
            this.getTrainList()
        }
    },
    actions: {
        getTrainList() {
            axios.get("/getTrainList").then(res => {
                if (res.data.code === 200) {
                    this.trainList = res.data.data
                }
            })
        },
    },
})
export {
    useAlertsStore
}

4.main.js中引入创建好的pinia

import { createPinia } from 'pinia';

let pinia = createPinia();
let app = createApp(App);
app.use(pinia);

5.在项目中使用:

<script>
import { useAlertsStore } from '../store/index';
//实现仓库数据双向绑定
import { storeToRefs } from 'pinia';


export default {
    setup() {
        //创建仓库对象
        const store = useAlertsStore();
        let { trainList } = storeToRefs(store);//解构赋值，数据双向绑定，关联store
        onMounted(() => {
            store.GET_TRAIN
        })
    }
    return {
        trainList //这就是拿到的数据
    }
}














</script>

6.到这就结束了，不知道有没有帮你解决问题呢 欢迎各位在评论区评论哦！