前言:在接手别人早期的项目后,由于很多地方大改,而项目以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;
})
}
}
}
})
}
},
});