vue+vite+pinia+axios+vue-router使用

一、安装 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);
			}
		}
	}

2.父组件传值给子组件（vue3的setup里）

//父组件
<DeviceInfo deviceInfoGuid="123456"></DeviceInfo>


//子组件

//定义传入接收值
	const props=defineProps < {
		deviceInfoGuid: string
	} > ()
	 console.log("设备Guid：" + props.deviceInfoGuid)

三、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 {}
  },
})

8.数据持久化

Pinia实现数据持久化存储_G_ing的博客-CSDN博客

8.1安装

npm i pinia-plugin-persist --save

8.2 改造pinia引入

/src/store/index.js

import { createPinia } from 'pinia'
import piniaPluginPersist from 'pinia-plugin-persist'
 
const store = createPinia()
store.use(piniaPluginPersist)
 
export default store

8.3 main.ts加入（store）

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import store from './store'

createApp(App).use(store).mount('#app')

8.4 /src/store/user.js

import { defineStore } from 'pinia'
 
export const user = defineStore({
  id: 'user',
  state:()=>{
  	return {
        userInfo:{
            nickName:'章三'
        },
        token:'xfdfdsjkdsj'
  	}
  },
  getters:{
 
  },
  actions:{
  	onchangeName( val ){
  	  		this.userInfo.nickName = val;
  	  	}

  },
  persist: {
    enabled: true,
    strategies: [
      {
        key: 'my_user',
        storage: localStorage,
      }
    ]
  }
})

8.5 使用

<template>
	<div>
		<h1 >pinia，持久化</h1>
		<div>npm i pinia-plugin-persist --save</div>
		{{ userInfo.nickName }}
		<button @click='onchangeName'>更新时间</button>
	</div>
</template>
 
<script setup>
import { storeToRefs } from 'pinia'
import { user } from '../store/user'
const store = user();
let { userInfo } = storeToRefs(store);


const onchangeName = ()=>{
	store.onchangeName(Date.now());
	console.log(userInfo.nickName)
}
</script>

 

官网：安装 | 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>

五、vue-router

1.安装

官网：安装 | Vue Router

2.main.ts引用

import router from './router'

const pinia = createPinia();
createApp(App)
	.use(router)
	.mount('#app')

3.定义路由 router（index.js）

import {
	createRouter,
	createWebHashHistory
} from 'vue-router';

const routes = [{
		path: '/',
		component: () => import("../components/Login.vue")
	},
	{
		path: '/HelloWorld',
		component: () => import("../components/HelloWorld.vue")
	},
	{
		path: '/TableMange',
		component: () => import("../components/TableMange.vue")
	},

];

const router = createRouter({
	history: createWebHashHistory('/'),
	routes
});

export default router;

更新日志

20221229：初始化文档

20230108：增加axios使用

20230217：增加router使用