v3 +ts 自定义角标及 角标数目

前言：在接手别人早期的项目后，由于很多地方大改，而项目以v3形式写的，而我没用过v3。故经历磕磕碰碰过来后，决定以  此项目  pinia 方面和  角标定义方面记录一下过程。（一是没用过，二是没弄过。）

一.pinia简介

Pinia    是vue全局状态管理工具，类似vueX，用于全局的数据状态存储、修改变更等等。相较于vueX，pinia的使用较为简单，轻量级，上手容易，干掉了vueX的层层套娃

二. pinia安装

npm install pinia

三.创建  pinia配置文件 ​​

import { createPinia } from 'pinia';

// 创建
const pinia = createPinia();

// 导出
export default pinia;

main.ts或main.js文件全局使用 pinia

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

import pinia from '@/stores/index';
const app = createApp(App)
app.use(router)
app.use(pinia)
app.mount('#app')

配置字段类型

export interface piniaTestStates{
    ccc:any
}
export interface xxxx{
    //... 其他文件想使用  配置对应字段即可
}

import { defineStore } from 'pinia';
import { piniaTestStates } from './interface/index'
export const piniaTest = defineStore('piniaTest', {
    state: (): piniaTestStates => ({
        ccc: {
            m:1,
            n:2,
        },
    }),
    // actions支持以异步/同步调用 接口及方法
    actions: {
        async xxx(data:any){
            //...
        },

        ccc(){
            //...
        }
    }
})

子组件

 关于角标来说

import { defineStore } from 'pinia';
import { nextTick} from 'vue';
import { chatListStates } from './interface';
import { Session } from '/@/utils/storage.ts';
import { chatsApi } from '/@/api/chat/index';
const chatapi = chatsApi();
export const useChatList = defineStore('chatList', {
	state: (): chatListStates => ({ 
		sessionInfo: {},//会话信息
		chatlist: [],//聊天详情
		OnlineList: [], //在线列表
		jiaobiao: {},//角标数据
	}),
	actions: {
		deleteObj(userId: any) {
			let key = userId
			delete this.jiaobiao[key];
			this.OnlineList.forEach((item: any, index: number) => {
				if (item.userId == key) {
					item.jiaobiao = 0;
				}
			})
		},

		// 监听OnlineList，判断jiaobiao是否存在 (初次登录和存在用户掉线时)
		// 若存在则  赋值给他，若不存在 则生成他
		jiaobiaoE(data: any) {
			let param = {
				token: Session.get('token'),
			};
			chatapi.getCurrentSession(param).then((res: any) => {
				if (res.code == 0) {
					let list = res.data.list;
					list.forEach((item: any, index: number) => {
						if (item.userId == data.userId) {
							let key = item.userId
							if (this.jiaobiao[key]) {//只对数组存出string 字段，且此行只对vue3生效  vue2这么写  数组只会null  哪怕 数组.push（xx） 也只能得到 [0:xx] 这种  当然也可以考虑一些写法来得到   唯一标识id:0  
								this.jiaobiao[key] = ++this.jiaobiao[key]
							} else {
								if (this.selectIndex == key) {
									//当前会话的用户 和发消息的同一个人
									return
								}
								this.jiaobiao[key] = 1
								console.log(this.jiaobiao[key])
							}
								this.zaixian[key] = true
							
						}
						Object.keys(this.jiaobiao).forEach(key => {
							if (key == item.userId) {
								item.jiaobiao = this.jiaobiao[key]
							}
						})
					})
					this.OnlineList = list;
				}
			})
		},

		// 去除非在线用户
		zaixianT(userId: any) {
			let key = userId //此为userId
			this.zaixian[key] =false;
			this.OnlineList.forEach((item: any, index: number) => {
				if (item.userId == key) {
					item.zaixian = false;
				}
			})
			// console.log('去除在线用户',this.OnlineList)
			if(this.sessionInfo.userId==key){
				this.sessionInfo.zaixian=false;//改离线
			}
		},

		// 聊天信息记录(客户端) 此代码为  本地插入操作  由发送或接收到wss时触发
		connectChatList(params: any, reverse: boolean = false) {
			// console.log('pini传参获取消息参数', params)
			return new Promise<void>((resolve, reject) => {
				if (Array.isArray(params)) {//传入类型为数组
					params.forEach((e, i) => {
						// 对比数组第一条时间
						if (params[i - 1] && e.createTime - params[i - 1].createTime > 300) {
							e.showTime = true;
						}
					})
					if (this.chatlist.length === 0) { //初次获取聊天消息数据
						// console.log('第一次获取数据',params)
						this.chatlist = params;
						setTimeout(() => {
							// const div = document.getElementById('chatContent');
							document.getElementById('chatContent')!.scrollTop = document.getElementById('chatContent')!.scrollHeight;
							// document.getElementById('chatContent')!.scrollTop = document.getElementById('chatContent')!.clientHeight + 2000
						}, 100);
					} else {
						// 发送成功后，二次调用将信息插入数组  减少接口调用
						// console.log('二次插入数据',params)	
						if (params.length === 0) {  //传入的类型如果是数组类型且长度为0 
							this.loadingEnd = true; //数据加载完成
							return
						}
						const oldHeight: number = document.getElementById('contents')!.clientHeight;
						this.chatlist.unshift(...params) //下滚时的头部插入
						nextTick(() => {
							const newHeight: number = document.getElementById('contents')!.clientHeight;
							document.getElementById('chatContent')!.scrollTop = newHeight - oldHeight
							setTimeout(() => {
								this.refreshing = false
							}, 200);
						})
					}
				} else { //传入非数组类型数据
					let ccc = typeof (params) == 'string' ? JSON.parse(params) : params;
					if (this.sessionInfo && this.sessionInfo.userId == ccc.userId) {
						// console.log('还没插入数据', this.chatlist)
						if (reverse) {
							this.chatlist.unshift(ccc);
							// console.log('插入头部', this.chatlist)
						} else {
							this.chatlist.push(ccc)
							// console.log('插入底部', this.chatlist)
							nextTick(() => {
								document.getElementById('chatContent')!.scrollTop += document.getElementById('contents')!.clientHeight;
							})
						}
					}
				}
			})
		}
	},
});