vue+vite+pinia+axios使用

阿里云国内75折回扣微信号：monov8

阿里云国际，腾讯云国际，低至75折。AWS 93折免费开户实名账号代冲值优惠多多微信号：monov8 飞机：@monov6

一、安装 vite项目

1.创建项目npm create vite@latest
2.运行项目

//进入项目文件后执行

npm install  //安装

npm run dev  //运行

官网开始 | Vite 官方中文文档

二、vue使用案例

1.父组件调用子组件this.$refs.通过ref定义子组件的名字从而使用this.$refs.进调用子组件方法

//子组件 TableUI

export default {
		props:[],
		data() {
			return {
		},
		methods: {

			upcolumns(columnsData){
				this.columns=columnsData;
			}
		}
	}


//父组件
<TableUI ref="TableUI"></TableUI> 


import TableUI from './TableUI.vue'
export default {

		methods: {
			selectMenu(indexData) {
                //使用
				this.$refs.TableUI.upcolumns(this.tableUIData[indexData].columns);
			}
		}
	}

三、Pinia使用

1.安装

npm install pinia

2.使用

需要先安装path为了方便使用:npm install path --save

在src下创建目录src/store/index.js内容如下

import { defineStore } from 'pinia'

// useStore 可以是 useUser、useCart 之类的任何东西
// 第一个参数是应用程序中 store 的唯一 id
export const useStore = defineStore('main', {
  // 推荐使用 完整类型推断的箭头函数
    state: () => {
        return {
            // 所有这些属性都将自动推断其类型
            name: "pinia使用",
        };
    },
})

3.在需要使用的组件下调用this.store

	import {
		useStore
	} from '@/store/index'
	export default {
		setup() {
			const store = useStore()

			return {
				// 您可以返回整个 store 实例以在模板中使用它
				store,
			}
		},

		data() {
			return {

			}
		},
		computed: {

		},
		methods: {

			selectMenu(indexData) {
                //使用
            console.log(this.store)
			}
		}
	}

4.全局实时绑定和变化A组件改变B组件的pinia的数据B组件会实时更新数据。

5.数据变化订阅store.$subscribe

<script>
	import {
		useStore
	} from '@/store/index'
	export default {
		setup() {
			const store = useStore()
            //订阅数据变化
			const subscribe = store.$subscribe((mutation, state) => {
				/*
				* mutation主要包含三个属性值
				*   events当前state改变的具体数据包括改变前的值和改变后的值等等数据
				*   storeId是当前store的id
				*   type用于记录这次数据变化是通过什么途径主要有三个分别是
				*         “direct” 通过 action 变化的
				          ”patch object“ 通过 $patch 传递对象的方式改变的
				          “patch function” 通过 $patch 传递函数的方式改变的
				*
				* */
				// 我们就可以在此处监听store中值的变化当变化为某个值的时候去做一些业务操作之类的
				console.log(mutation)
				console.log(state)
			}, {
				detached: false
			})
			
			return {
				// 您可以返回整个 store 实例以在模板中使用它
				store,
			}
		},
		props: [],
		data() {
			return {
			}
		},
		methods: {

		}
	}
</script>

6.getters使用

getters定义的方法可以直接调用一般用于计算state属性值

export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  getters: {
    doubleCount: (state) => state.count * 2,
  },
})

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

<script>
export default {
  setup() {
    const store = useStore()

    return { store }
  },
}
</script>

7.actions使用

更加适合使用调取外部接口异步方法

export const useStore = defineStore('main', {
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++
    },
    randomizeCounter() {
      this.count = Math.round(100 * Math.random())
    },
  },
})

export default defineComponent({
  setup() {
    const main = useMainStore()
    // 作为 store 的一个方法调用该 action
    main.randomizeCounter()

    return {}
  },
})

官网安装 | Pinia

四、Axios使用

1.引用

npm install axios

2.封装请求基类

src/utils/request.ts

// 在reuests.ts 文件中
import axios , { AxiosRequestConfig }  from 'axios'
const request = axios.create({
  baseURL: 'http://localhost:1101', // 请求地址
  timeout: 5000
})

// 请求拦截器
request.interceptors.request.use(function (config) {
  // 一般在这里设置token
  // console.log('config', config)
  return config
}, function (err) {
  return Promise.reject(err)
})
// 响应拦截器
request.interceptors.response.use(function (config) {
  return config
}, function (err) {
  return Promise.reject(err)
})

//返回数据data
export default <T = any>(config: AxiosRequestConfig) => {
  return request(config).then(res => {
    return res.data.data as T // 根据你自己的情况
  })
}
// export default request

3.封装请求接口

src/api/common.ts

/**
 * 公共基础数据接口
 */
import request from '../utils/request'

// export const getUIConfig = () => {
//   return request({
//     method: 'get',
//     url: 'login/info'
//   })
// }

export const getUIConfig = () => {
	return request({
		method: 'post',
		url: 'api/Config/UI/Get',
		data: {
			id: "string",
			sign: "string",
			version: "string",
			dateTime: "2023-01-08T02:09:08.448Z",
			data: "string"
		}
	})
}

export const getUIConfig2 = () => {
	return request({
		method: 'post',
		url: 'api/Config/UI/Get',
		data: {
			id: "string",
			sign: "string",
			version: "string",
			dateTime: "2023-01-08T02:09:08.448Z",
			data: "string"
		}
	})
}

4.使用api

进入需要使用的vue组件

<script>
//应用接口组件
	import { getUIConfig,getUIConfig2 } from '@/api/common.ts'
	export default {
		setup() {
//调用
			getUIConfig().then(res => {
			    console.log('res', res)
			  })
//调用api
			  getUIConfig2().then(res => {
			      console.log('res', res)
			    })
			  
			return {

			}
		}



	}
</script>