ts+vue3+vite+pinia+vue-router 踩坑合集

Posted 2023-04-30

参考技术A

npm install node-sass
npm install sass-loader

配置全局 mixin.scss
根目录找到 vite.config.js

解决办法:
按照提示安装库
npm i --save-dev @types/node
然后在 tsconfig.json types字段中添加node; 然后重启一下; 就行了

解决办法:
在 vite.config.js 配置别名

很多人以为这样就结束了;在js 文件中确实就已经可以用了; 但是在.vue 文件中还是不行,其实还需要在 tsconfig.json 里面配置对应的别名; 详情见 https://www.jianshu.com/p/1477b68b2d69

tips: 调试路由时可通过router.getRoutes(); 查看动态路由是否已经完整注入进去

解决办法1. 使用Glob Import 动态导入

解决办法2 : 在声明路由数据时使用 RouteRecordRaw ; 下面是 RouteRecordRaw 的注解

pinia 使用:
npm install pinia
or
yarn add pinia

定义单个store

使用useStore

动态路由权限踩坑

页面更新后提示报错信息:
问题: Uncaught Error: [🍍]: getActivePinia was called with no active Pinia. Did you forget to install pinia?
什么意思呢? 你当前正在使用pinia; 但是pinia 还没有挂载成功!!!! what? 我使用vuex就不会这样呀!!!! 戏精

解决方案:

使用时引入pinia

vue+vite+pinia+axios使用

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

更新日志

20221229：初始化文档

20230108：增加axios使用