vue3+TS的项目记录一
一、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>