一些记录 axios & pinia

这是我参与「第四届青训营」笔记创作活动的第6天。

一、Axios 是什么？

Axios 是可以发出 http 请求的 JavaScript 库，在浏览器和 node.js 环境中都可以运行。

二、axios 与 fetch 的区别

1、相同点：

都是可以发出 http 请求的 JavaScript 库。

2、不同点

fetch 是 JavaScript 原生库，浏览器都支持，无需安装直接使用；axios 不是原生库，需要安装才能使用；
fetch 只能在浏览器环境中运行；axios 既可以在浏览器、也可以在node.js 环境中运行。

3、其他

如果是 node.js 项目，优先选择使用 axios.

三、axios封装

文件：新建utils/api/request.js

 import axios from 'axios';
 
 //1. 创建axios对象
 const service = axios.create();
 
 //2. 请求拦截器
 service.interceptors.request.use(config => {
   return config;
 }, error => {
   Promise.reject(error);
 });
 
 //3. 响应拦截器
 service.interceptors.response.use(response => {
   //判断code码
   return response.data;
 },error => {
   return Promise.reject(error);
 });
 
 export default service;

注意下载axios

 npm install axios -S

四、api文件

设置代理

打开文件：vite.config.js

 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 
 // https://vitejs.dev/config/
 export default defineConfig({
     plugins: [vue()],
     server:{
         proxy:{
             '/api':'http://localhost:8080'
         }
     }
 })

文件：新建utils/api/courseManage.js

 import request from './request'
 
 export function mostNew( data ){
     return request({
         url:'/api/course/mostNew',
         method:"post",
         data
     })
 }

五、使用 pinia

一、基础使用

1.1 安装下载

yarn add pinia
# or with npm
npm install pinia

1.2 main.js引入

import { createPinia } from 'pinia'

app.use(createPinia())

1.3 根目录新建store/index.js中写入

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{},
  actions:{}
})

1.4 组件使用

<script setup>
import { useStore } from '../store'
const store = useStore();
</script>

二、State

2.1 Pinia定义state数据

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      isAdmin: true,
    }
  },
  getters:{},
  actions:{}
})

2.2 组件使用pinia的state数据

<template>
	<div>
		<h1>A组件</h1>
		{{ name }}
	</div>
</template>

<script setup>
import { useStore } from '../store'
const store = useStore();
let { name } = store;
</script>

2.3 组件修改pinia的state数据

本身pinia可以直接修改state数据，无需像vuex一样通过mutations才可以修改，但是上面写的let { name } = store;这种解构是不可以的，所以要换解构的方式。

<template>
	<div>
		<h1>A组件</h1>
		{{ name }}
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name }  = storeToRefs(store);
const btn = ()=>{
	name.value = '123';
}
</script>

2.4 如果state数据需要批量更新

store/index.js

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
      name: 'Eduardo',
      arr:['a','b','c']
    }
  },
  getters:{},
  actions:{}
})

组件代码

<template>
	<div>
		<h1>A组件</h1>
		{{ name }}
		{{ counter }}
		{{ arr }}
		<button @click='btn'>按钮</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { name,counter,arr }  = storeToRefs(store);
const btn = ()=>{
	//批量更新
	store.$patch(state=>{
		state.counter++;
		state.arr.push(4);
		state.name = '456';
	})
}
</script>

使用$patch进行批量更新

三、actions

actions就比较简单了，写入方法，比如我们可以让state中的某一个值+=，而且传入参数

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0
    }
  },
  getters:{},
  actions:{
  	changeCounter( val ){
  		this.counter += val;
  	}
  }
})

<template>
	<div>
		<h1>A组件</h1>
		{{ counter }}
		<button @click='add'>加10</button>
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter }  = storeToRefs(store);
const add = ()=>{
	store.changeCounter(10);
}
</script>

四、getters

getters和vuex的getters几乎类似，也是有缓存的机制

import { defineStore } from 'pinia'

export const useStore = defineStore('storeId', {
  state: () => {
    return {
      counter: 0,
    }
  },
  getters:{
  	counterPar(  ){
  		console.log(111);
  		return this.counter + 100;
  	}
  },
  actions:{}
})

<template>
	<div>
		{{ counterPar }}
		{{ counterPar }}
		{{ counterPar }}
		<h1>A组件</h1>
		{{ counter }}
	</div>
</template>
<script setup>
import { storeToRefs } from 'pinia'
import { useStore } from '../store'
const store = useStore();
let { counter, counterPar }  = storeToRefs(store);
</script>

一些记录 axios & pinia | 青训营笔记