vue3+TS的项目记录一

原创已于 2023-04-24 11:51:40 修改 · 661 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #typescript

于 2023-04-06 15:15:48 首次发布

vue 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了在Vue3项目中使用Pinia进行状态管理，包括defineStore和Pinia的核心概念，以及如何在实际项目中应用。同时，讨论了Vue3的组合式API，如reactive、ref、watch等，并展示了如何使用接口和元组。此外，还涵盖了正则表达式在处理输入事件中的应用，以及动态添加表格行的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、defineStore() & pinia 是什么东西

学习过程一：上网搜索

https://pinia.vuejs.org/zh/core-concepts/
核心概念:
定义 Store (setup Store,Option Store）
State:访问state，重置state- $reset(), 变更state- $patch((state)=>{…})，替换state，订阅state
Getter
Action
插件
组件外的 Store
2.[前端开发]Vue3中Pinia的介绍与使用： https://zhuanlan.zhihu.com/p/519634541
3.一文搞懂pinia状态管理（保姆级教程）： https://zhuanlan.zhihu.com/p/533233367
4.轻松搞定Vue3+Pinia-4-多个store：https://www.jianshu.com/p/2c8409f28a25
5.Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节： https://blog.csdn.net/m0_71485750/article/details/125982691

学习过程二：看书

《循序渐进vue.js3前端开发实战》张益珲著
（vue3+vueX+vue-route+elementPlue+vue-Axios+vue cli+vite）

第十三章 vue状态管理
涉及知识点：状态管理、vuex框架、state状态、getter方法、mutation、action、module
主要学习：

1.vuex框架的安装与简单使用
2.多组件共享状态的管理方法
3.多组件驱动同一状态的方法

摘录：

1.vuex采用集中的方式管理所有组件的状态

学习过程三：项目应用

扩展知识：1. 元组tuple； 2.只读的数组/元组；

// 文件路径 src> store> modules> useEnumDic.ts
import {defineStore} from pinia

export type dicTuple = readonly [number, string];// 这里涉及到 元组tuple 的概念; readonly 
export type EnumDic = dicTuple[];

export const useEnumDicStore = defineStore(
	EnumDic'
	()=> {
		const getDicValue = (key: number, dicet: EnumDic) => {
			const dic = (dicSet. find (item => item[0] = key))
			if (dic) {
				return dic[1]
			} else {
				return  '末定义的枚举项！'
			}
		}
		const getDickey = (val: string, dicset: EnumDic) => {
			const dic = (dicset.find (item => item[1] - val))
			if (dic) (
				return dic[e]
			} else {
				return '末定义的枚举值！'
			}
		}
		const serviceStatusSet: EnumDic = [[0,"等待中"],[1,"处理中"],[2,"运行中"],[3,'关闭'],[4,'异常']];
		const serviceStatusColorSet: EnumDic = [[0,"#ffbfee"],[1,"#0e77d1"],[2,"#bffbf"]];
		const serviceTypeSet: EnumDic = [[0,"TMS"],[1,"WMS"],[2,"巷道"],[3,"WMTS"],[4,"WFS"]];
		const datasourceTypeset: EnumDic = [[0,"CAD"],[1,"SHP"]];
		return { getDicvalue, getDickey, serviceStatusSet, serviceStatusColorSet, serviceTypeSet, datasourceTypeset}
	}
)

在这里插入图片描述

// .vue文件
<template>
	<a-select ref="select" v-model:value="selectServiceType" :options="serviceTypeSet" @change="handleChange"
		:fieldName="{ label:'1', value:'0'}">
	</a-select>
</template>
import { getDicValue , useEnumDicStore } from "@/store/modules/useEnumDic"

setup(){
	const { serviceTypeSet} = useEnumDicStore();
	const typeName = ref<string[]>([]);
	const selectServiceType = ref(4);
	function aaa(){
		res.forEach(ele=>{
			typeName.value.push( getDicValue(ele.type as number, serviceTypeSet) );
		})
	}
	return {
		serviceTypeSet
	}
}

二、组合式API

1. import { reactive, ref, watch } from ‘vue’

const data = reactive<any[]>([]);
 
watch(
	()=>value,
	(newVal,old)=>{
	console.log(newVal,old)
	}
)

https://vue3js.cn/reactivity/reactive.html
vue3保姆级教程
 https://cn.vuejs.org/guide/typescript/composition-api.html#typing-component-emits

2.import { toRaw } from ‘vue-router’

3.import { defineComponent, useRouter, PropType } from ‘vue-router’

setup{
	const router = useRouter();
	router.push({ name:"aaa", query:{ id:id.....}})
}

vue路由管理

三、InstanceType

 <change-pwd-form ref="ChangePwdFormRef"></change-pwd-form>

 import ChangePwdForm from './ChangePwdForm.vue'
 
 setup{
  const ChangePwdFormRef = ref<InstanceType<typeof ChangePwdForm> | null>(null);
  //console.log(ChangePwdFormRef);
  return{ ChangePwdFormRef }
 }

1.Vue3+Ts 项目中定义 ref 实例的类型：https://juejin.cn/post/6978035248487464974

四、interface 怎么使用

1. 示例1

interface ValueType<T>{
 value: T
}
setup{
   const tableData= reactive<ValueType<CADData[]>>({ value: []})
}

Vue & TypeScript 初体验 - TypeScript中的Interface：https://juejin.cn/post/6844904017957486599

2.示例2

interface Data {
	[key:string]: Array<T>  //这里会提示找不到名称T
}

props:{
	tabledata:{
		type:Array,
		defult:[]
	},
	tablecolumns:{
		type:Array,
		defult:[]
	},
},
setup(props:Data){
	const { tabledata } = toRefs(props)
}

https://www.codenong.com/56835492/

五、input输入框事件

键盘事件
keydown：当用户按下键盘上的任意按键时触发，如果按住不放，会重复触发此事件。
keyup：当用户释放键盘上的按键时触发。

enter回车键：@keyup.enter.native
@mouseover.native
@mouseout.native

六、正则表达式

需求：页面输入关键词，多个关键词用逗号或空格分隔。点击搜索按钮，接口要求逗号分隔的字符串
在这里插入图片描述

//vue3
//正则 查找字符串中的，和空格 转换成,
const searchString=ref('')
searchString.value.replace(/[\ |\，]/g,',')

\ 空格
\，逗号
| 竖线
\n 换行
.replace(/\r+|\n+/g,‘,’) // 把所有的回车和换行转换成，（逗号）（+代表所有的，去重）
Vue中的正则表达式

七、动态添加行

在这里插入图片描述
第一种方式：表格实现

  <el-table :data="tableData">
     <el-table-column prop="attrname"
                      label="属性">
       <template slot-scope="scope">
         <el-input v-model="scope.row.attrname"
                   size="mini"
                   placeholder="名称" />
       </template>
     </el-table-column>
     <el-table-column prop="attrtype"
                      label="数值类型">
       <template slot-scope="scope">
         <el-select v-model="scope.row.attrtype"
                    placeholder="请选择">
           <el-option v-for="item in attrtypes"
                      :key="item.value"
                      :label="item.name"
                      :value="item.value">
           </el-option>
         </el-select>
       </template>
     </el-table-column>
    <el-table-column>
      <template slot="header"
                slot-scope="scope">
        <el-button type="primary"
                   @click="addField()">新增</el-button>
      </template>
      <el-table-column prop="operate"
                       label="操作">
        <template slot-scope="scope">
          <el-button @click="deleteAttr(scope.$index, tableData)">删除</el-button>
        </template>
      </el-table-column>
    </el-table-column>
  </el-table>
  
  addField: function () {
    var a = {
      'attrname': '名称',
      'attrtype': 'string'
    };
    this.tableData.push(a);
    return;
  },
  deleteAttr: function (index, rows) {
    rows.splice(index, 1);
  }

第二种方式：自定义

<div style="display:flex; flex-direction:column;">
	<template v-for="(item,idx) in dataSource" :key="idx">
		<div style="display:flex;">
		</div>
	</template>
</div>