store命名优化

src/api/user.js

@@ -1,5 +1,5 @@
 import request from '@/js/utils/request'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { CLIENT_TYPE, CLIENT_NAME, CLIENT_VERSION } from '@/const/userConst'
 import { encryptPasswordObj, encryptDoublePasswordObj } from '@/js/utils/crypto'
 
@@ -7,7 +7,7 @@ export const userRegisterService = async ({ account, nickName, password }) => {
   const obj = await encryptPasswordObj(account, password)
   return request.post('/user/register', {
     account: account,
-    clientId: userStore().clientId,
+    clientId: useUserStore().clientId,
     nickName: nickName,
     ...obj
   })
@@ -17,7 +17,7 @@ export const userNonceService = ({ account }) => {
   return request.get('/user/nonce', {
     params: {
       account: account,
-      clientId: userStore().clientId
+      clientId: useUserStore().clientId
     }
   })
 }
@@ -34,7 +34,7 @@ export const userForgetService = async (obj) => {
   const passwordObjObj = await encryptPasswordObj(obj.account, obj.password)
   delete obj.password
   return request.post('/user/forget', {
-    clientId: userStore().clientId,
+    clientId: useUserStore().clientId,
     ...obj,
     ...passwordObjObj
   })
@@ -44,7 +44,7 @@ export const userLoginService = async ({ account, password }) => {
   const obj = await encryptPasswordObj(account, password)
   return request.post('/user/login', {
     account: account,
-    clientId: userStore().clientId,
+    clientId: useUserStore().clientId,
     ...obj
   })
 }
@@ -64,7 +64,7 @@ export const userModifySelfService = (obj) => {
 export const userModifyPassword = async ({ account, oldPasswordStr, newPasswordStr }) => {
   const obj = await encryptDoublePasswordObj(account, oldPasswordStr, newPasswordStr)
   return request.post('/user/modifyPwd', {
-    clientId: userStore().clientId,
+    clientId: useUserStore().clientId,
     ...obj
   })
 }

src/components/card/GroupCard.vue

@@ -11,7 +11,13 @@ import DeleteButton from '@/components/common/DeleteButton.vue'
 import EditAvatar from '@/components/common/EditAvatar.vue'
 import { combineId } from '@/js/utils/common'
 import { userQueryService } from '@/api/user'
-import { groupStore, userStore, messageStore, userCardStore, groupCardStore } from '@/stores'
+import {
+  useGroupStore,
+  useUserStore,
+  useMessageStore,
+  useUserCardStore,
+  useGroupCardStore
+} from '@/stores'
 import SelectUserDialog from '../common/SelectUserDialog.vue'
 import SingleSelectDialog from '../common/SingleSelectDialog.vue'
 import {
@@ -28,11 +34,11 @@ import router from '@/router'
 import GroupMembersTable from '../common/GroupMembersTable.vue'
 import { msgChatCreateSessionService } from '@/api/message'
 
-const groupData = groupStore()
-const userData = userStore()
-const messageData = messageStore()
-const userCardData = userCardStore()
-const groupCardData = groupCardStore()
+const groupData = useGroupStore()
+const userData = useUserStore()
+const messageData = useMessageStore()
+const userCardData = useUserCardStore()
+const groupCardData = useGroupCardStore()
 const isShowSelectDialog = ref(false)
 const isShowSingleSelectDialog = ref(false)
 const isShowEditAvatar = ref(false)

src/components/card/UserCard.vue

@@ -11,16 +11,16 @@ import {
   VideoCamera
 } from '@element-plus/icons-vue'
 import default_avatar from '@/assets/image/default_avatar.png'
-import { userStore, messageStore, userCardStore } from '@/stores'
+import { useUserStore, useMessageStore, useUserCardStore } from '@/stores'
 import { combineId } from '@/js/utils/common'
 import { MsgType } from '@/proto/msg'
 import { msgChatCreateSessionService } from '@/api/message'
 import router from '@/router'
 import { ElMessage } from 'element-plus'
 
-const userData = userStore()
-const messageData = messageStore()
-const userCardData = userCardStore()
+const userData = useUserStore()
+const messageData = useMessageStore()
+const userCardData = useUserCardStore()
 
 const sessionId = computed(() => {
   return combineId(userData.user.account, userCardData.userInfo?.account)

src/components/common/EditAvatar.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { Plus, Upload, RefreshLeft, RefreshRight, Refresh } from '@element-plus/icons-vue'
 import { mtsUploadService } from '@/api/mts'
 import { ElMessage } from 'element-plus'
@@ -9,7 +9,7 @@ import { VueCropper } from 'vue-cropper'
 
 const props = defineProps(['modelValue', 'model', 'groupInfo'])
 const emit = defineEmits(['update:modelValue', 'update:newAvatar'])
-const userData = userStore()
+const userData = useUserStore()
 
 const cropper = ref()
 const srcImg = ref('')

src/components/common/GroupMembersTable.vue

@@ -3,7 +3,7 @@ import { ref, computed } from 'vue'
 import { Mute } from '@element-plus/icons-vue'
 import { ElLoading, ElMessage, ElMessageBox } from 'element-plus'
 import { el_loading_options } from '@/const/commonConst'
-import { userStore, groupStore, messageStore, userCardStore } from '@/stores'
+import { useUserStore, useGroupStore, useMessageStore, useUserCardStore } from '@/stores'
 import {
   groupUpdateMuteService,
   groupChangeRoleService,
@@ -19,10 +19,10 @@ import { MsgType } from '@/proto/msg'
 const props = defineProps(['groupId', 'memberSearchKey'])
 const emit = defineEmits(['openSession'])
 
-const userData = userStore()
-const groupData = groupStore()
-const messageData = messageStore()
-const userCardData = userCardStore()
+const userData = useUserStore()
+const groupData = useGroupStore()
+const messageData = useMessageStore()
+const userCardData = useUserCardStore()
 
 const myAccount = computed(() => userData.user.account)
 

src/components/search/ResultBox.vue

@@ -2,12 +2,12 @@
 import HashNoData from '@/components/common/HasNoData.vue'
 import ContactItem from '@/components/item/ContactItem.vue'
 import GroupItem from '@/components/item/GroupItem.vue'
-import { searchStore } from '@/stores'
+import { useSearchStore } from '@/stores'
 
 const props = defineProps(['searchTab', 'keyWords'])
 const emit = defineEmits(['showContactCard', 'showGroupCard', 'openSession'])
 
-const searchData = searchStore()
+const searchData = useSearchStore()
 
 const onShowContactCard = (contactInfo) => {
   emit('showContactCard', contactInfo)

src/components/search/SearchBox.vue

@@ -3,13 +3,13 @@ import { ref, computed, nextTick, watch } from 'vue'
 import { Search } from '@element-plus/icons-vue'
 import { userQueryService, userQueryByNickService } from '@/api/user'
 import { groupSearchGroupInfoService } from '@/api/group'
-import { searchStore } from '@/stores'
+import { useSearchStore } from '@/stores'
 import ResultBox from './ResultBox.vue'
 import { ElMessage } from 'element-plus'
 
 const emit = defineEmits(['showContactCard', 'showGroupCard', 'openSession'])
 
-const searchData = searchStore()
+const searchData = useSearchStore()
 const inputRef = ref()
 const keyWords = ref('')
 const isShowSearchDialog = ref(false)

src/js/event/receiveChatMsg.js

@@ -1,11 +1,11 @@
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 import { msgChatCreateSessionService } from '@/api/message'
 import { MsgType } from '@/proto/msg'
 import { playMsgReceive } from '../utils/audio'
 
 export const onReceiveChatMsg = (updateScroll, capacity) => {
   return async (msg) => {
-    const messageData = messageStore()
+    const messageData = useMessageStore()
     const sessionId = msg.body.sessionId
     const now = new Date()
 

src/js/event/receiveChatReadMsg.js

@@ -1,8 +1,8 @@
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 
 export const onReceiveChatReadMsg = () => {
   return async (msg) => {
-    const messageData = messageStore()
+    const messageData = useMessageStore()
     messageData.updateSession({
       sessionId: msg.body.sessionId,
       remoteRead: msg.body.content

src/js/event/receiveGroupChatMsg.js

@@ -1,11 +1,11 @@
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 import { MsgType } from '@/proto/msg'
 import { msgChatQuerySessionService } from '@/api/message'
 import { playMsgReceive } from '../utils/audio'
 
 export const onReceiveGroupChatMsg = (updateScroll, capacity) => {
   return async (msg) => {
-    const messageData = messageStore()
+    const messageData = useMessageStore()
     const sessionId = msg.body.sessionId
     const now = new Date()
 

src/js/event/receiveGroupChatReadMsg.js

@@ -1,9 +1,9 @@
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 
 export const onReceiveGroupChatReadMsg = () => {
   return async (msg) => {
     if (msg.body.fromId === msg.body.toId) {
-      const messageData = messageStore()
+      const messageData = useMessageStore()
       const now = new Date()
       messageData.updateSession({
         sessionId: msg.body.sessionId,

src/js/event/receiveGroupSystemMsg.js

@@ -1,11 +1,11 @@
-import { messageStore, groupStore } from '@/stores'
+import { useMessageStore, useGroupStore } from '@/stores'
 import { msgChatQuerySessionService } from '@/api/message'
 import { groupInfoService } from '@/api/group'
 
 export const onReceiveGroupSystemMsg = (updateScroll, capacity) => {
   return async (msg) => {
-    const messageData = messageStore()
-    const groupData = groupStore()
+    const messageData = useMessageStore()
+    const groupData = useGroupStore()
     const sessionId = msg.body.sessionId
     const now = new Date()
 

src/js/event/receiveStatusRes.js

@@ -1,12 +1,12 @@
-import { userStore, messageStore, groupStore } from '@/stores'
+import { useUserStore, useMessageStore, useGroupStore } from '@/stores'
 import { combineId, jsonParseSafe } from '@/js/utils/common'
 import { MsgType } from '@/proto/msg'
 
 export const onReceiveStatusResMsg = () => {
   return async (msg) => {
-    const userData = userStore()
-    const messageData = messageStore()
-    const groupData = groupStore()
+    const userData = useUserStore()
+    const messageData = useMessageStore()
+    const groupData = useGroupStore()
 
     // 1. 更新本账号的多端下的最终状态
     const content = jsonParseSafe(msg.body.content)

src/js/utils/audio.js

@@ -1,7 +1,7 @@
 import msgReceive from '@/assets/audio/msgreceive.mp3'
 import msgSend from '@/assets/audio/msgsend.mp3'
-import { userStore } from '@/stores'
-const userData = userStore()
+import { useUserStore } from '@/stores'
+const userData = useUserStore()
 
 export const playMsgReceive = () => {
   if (!userData.user.newMsgTips) {

src/js/utils/request.js

@@ -1,5 +1,5 @@
 import axios from 'axios'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import router from '@/router'
 import { generateSign } from './crypto'
 import { v4 as uuidv4 } from 'uuid'
@@ -23,7 +23,7 @@ const instance = axios.create({
 // 请求拦截器
 instance.interceptors.request.use(
   async (config) => {
-    const userData = userStore()
+    const userData = useUserStore()
     const traceId = uuidv4()
     if (config.url === '/user/refreshToken') {
       const token = userData.getRefreshToken()
@@ -62,8 +62,8 @@ instance.interceptors.response.use(
   },
   async (err) => {
     if (err.response?.status === 401) {
-      userStore().clearAt()
-      userStore().clearRt()
+      useUserStore().clearAt()
+      useUserStore().clearRt()
       ElMessage.error('您还未登录，请先登录')
       router.push('/login')
     } else {

src/js/websocket/constructor.js

@@ -1,6 +1,6 @@
 import { Msg, Header, MsgType, Body } from '@/proto/msg'
 import { proto } from '@/const/msgConst'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { v4 as uuidv4 } from 'uuid'
 
 export const chatConstructor = (sessionId, toId, content, seq) => {
@@ -11,7 +11,7 @@ export const chatConstructor = (sessionId, toId, content, seq) => {
     isExtension: false
   })
 
-  const userData = userStore()
+  const userData = useUserStore()
   const body = Body.create({
     fromId: userData.user.account,
     fromClient: userData.clientId,
@@ -35,7 +35,7 @@ export const groupChatConstructor = (sessionId, groupId, content, seq) => {
     isExtension: false
   })
 
-  const userData = userStore()
+  const userData = useUserStore()
   const body = Body.create({
     fromId: userData.user.account,
     fromClient: userData.clientId,
@@ -87,7 +87,7 @@ export const chatReadConstructor = (sessionId, toId, content) => {
     isExtension: false
   })
 
-  const userData = userStore()
+  const userData = useUserStore()
   const body = Body.create({
     fromId: userData.user.account,
     fromClient: userData.clientId,
@@ -111,7 +111,7 @@ export const groupChatReadConstructor = (sessionId, groupId, content) => {
     isExtension: false
   })
 
-  const userData = userStore()
+  const userData = useUserStore()
   const body = Body.create({
     fromId: userData.user.account,
     fromClient: userData.clientId,
@@ -135,7 +135,7 @@ export const statusReqConstructor = (accounts) => {
     isExtension: false
   })
 
-  const userData = userStore()
+  const userData = useUserStore()
   const body = Body.create({
     fromId: userData.user.account,
     fromClient: userData.clientId,
@@ -156,7 +156,7 @@ export const statusSyncConstructor = (status) => {
     isExtension: false
   })
 
-  const userData = userStore()
+  const userData = useUserStore()
   const body = Body.create({
     fromId: userData.user.account,
     fromClient: userData.clientId,

src/js/websocket/wsConnect.js

@@ -1,5 +1,5 @@
 import { Msg, MsgType } from '@/proto/msg'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { v4 as uuidv4 } from 'uuid'
 import { generateSign } from '../utils/crypto'
 import {
@@ -176,7 +176,7 @@ class WsConnect {
       return
     }
     // console.log('create websocket')
-    const userData = userStore()
+    const userData = useUserStore()
     const token = await userData.getAccessToken()
     const traceId = uuidv4()
     const timestamp = Math.floor(new Date().getTime() / 1000)

src/router/index.js

@@ -1,5 +1,5 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
@@ -167,7 +167,7 @@ const router = createRouter({
 })
 
 router.beforeEach(async (to, from, next) => {
-  const userData = userStore()
+  const userData = useUserStore()
   const isLogin = await userData.isLogin()
 
   if (!isLogin) {

src/stores/audio.js

@@ -5,7 +5,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 // audio的缓存数据，不持久化存储
-export const audioStore = defineStore('anylink-audio', () => {
+export const useAudioStore = defineStore('anylink-audio', () => {
   /**
    * {
    *   objectId_01: {objectId: objectId_01, url: xxx},

src/stores/document.js

@@ -5,7 +5,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 // document的缓存数据，不持久化存储
-export const documentStore = defineStore('anylink-document', () => {
+export const useDocumentStore = defineStore('anylink-document', () => {
   /**
    * {
    *   objectId_01: {objectId: objectId_01, url: xxx},

src/stores/group.js

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import { groupInfoListService } from '@/api/group'
 
 // group群组相关的缓存数据，不持久化存储
-export const groupStore = defineStore('anylink-group', () => {
+export const useGroupStore = defineStore('anylink-group', () => {
   /**
    * 和我有关的所有群组，格式：{groupId_1: groupInfo_1, groupId_2: groupInfo_2}
    */

src/stores/groupCard.js

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import {} from '@/api/group'
 
 // groupCard群组详情卡片相关的缓存数据，不持久化存储
-export const groupCardStore = defineStore('anylink-groupCard', () => {
+export const useGroupCardStore = defineStore('anylink-groupCard', () => {
   const isShow = ref(false)
 
   const groupId = ref('')

src/stores/image.js

@@ -7,7 +7,7 @@ import { ref } from 'vue'
 const pattern = /\{[a-f0-9]+\}/g
 
 // image的缓存数据，不持久化存储
-export const imageStore = defineStore('anylink-image', () => {
+export const useImageStore = defineStore('anylink-image', () => {
   /**
    * {
    *   objectId_01: {objectId: objectId_01, originUrl: xxx, thumbUrl: xxx},

src/stores/message.js

@@ -6,10 +6,10 @@ import {
   msgQueryPartitionService
 } from '@/api/message'
 import { ElMessage } from 'element-plus'
-import { imageStore, audioStore, videoStore, documentStore } from '@/stores'
+import { useImageStore, useAudioStore, useVideoStore, useDocumentStore } from '@/stores'
 
 // 消息功能相关需要缓存的数据，不持久化存储
-export const messageStore = defineStore('anylink-message', () => {
+export const useMessageStore = defineStore('anylink-message', () => {
   /**
    * message页面当前被选中的sessionId
    */
@@ -123,10 +123,10 @@ export const messageStore = defineStore('anylink-message', () => {
    */
   const addMsgRecords = async (sessionId, msgRecords) => {
     // 预加载消息中的图片和音频
-    await imageStore().preloadImage(sessionId, msgRecords)
-    await audioStore().preloadAudio(sessionId, msgRecords)
-    await videoStore().preloadVideo(sessionId, msgRecords)
-    await documentStore().preloadDocument(sessionId, msgRecords)
+    await useImageStore().preloadImage(sessionId, msgRecords)
+    await useAudioStore().preloadAudio(sessionId, msgRecords)
+    await useVideoStore().preloadVideo(sessionId, msgRecords)
+    await useDocumentStore().preloadDocument(sessionId, msgRecords)
 
     if (!msgRecords?.length) return
     msgRecords.forEach((item) => {

src/stores/search.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 
 // 不持久化存储
-export const searchStore = defineStore('anylink-search', () => {
+export const useSearchStore = defineStore('anylink-search', () => {
   const keywords = ref('')
 
   const setKeywords = (words) => {

src/stores/setting.js

@@ -2,7 +2,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 // 界面设置相关需要缓存的设置
-export const settingStore = defineStore(
+export const useSettingStore = defineStore(
   'anylink-setting',
   () => {
     const sessionListDrag = ref(0)

src/stores/user.js

@@ -4,7 +4,7 @@ import { userInfoService } from '@/api/user'
 import { refreshToken } from '@/api/user'
 
 // 用户模块
-export const userStore = defineStore(
+export const useUserStore = defineStore(
   'anylink-user',
   () => {
     const at = ref({

src/stores/userCard.js

@@ -3,7 +3,7 @@ import { ref } from 'vue'
 import {} from '@/api/group'
 
 // userCard用户详情卡片相关的缓存数据，不持久化存储
-export const userCardStore = defineStore('anylink-userCard', () => {
+export const useUserCardStore = defineStore('anylink-userCard', () => {
   const isShow = ref(false)
 
   const userInfo = ref({})

src/stores/video.js

@@ -5,7 +5,7 @@ import { defineStore } from 'pinia'
 import { ref } from 'vue'
 
 // video的缓存数据，不持久化存储
-export const videoStore = defineStore('anylink-video', () => {
+export const useVideoStore = defineStore('anylink-video', () => {
   /**
    * {
    *   objectId_01: {objectId: objectId_01, url: xxx},

src/views/LoginPage.vue

@@ -11,7 +11,7 @@ import {
   userVerifyCaptchaService,
   userForgetService
 } from '@/api/user.js'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { generateClientId } from '@/js/utils/common'
 import { flowLimiteWrapper } from '@/js/utils/flowLimite'
 
@@ -99,7 +99,7 @@ const rules = {
   ]
 }
 
-const userData = userStore()
+const userData = useUserStore()
 
 const register = async () => {
   if (demoFlag) {

src/views/contactList/ContactListLayout.vue

@@ -3,9 +3,9 @@ import contactListIcon from '@/assets/svg/contactList.svg'
 import groupIcon from '@/assets/svg/group.svg'
 import organizationIcon from '@/assets/svg/organization.svg'
 import { onMounted } from 'vue'
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 
-const messageData = messageStore()
+const messageData = useMessageStore()
 
 onMounted(async () => {
   await messageData.loadSessionList()

src/views/contactList/group/components/SubCommon.vue

@@ -4,7 +4,13 @@ import { Search, Edit, Delete, Check, Close } from '@element-plus/icons-vue'
 import AddButton from '@/components/common/AddButton.vue'
 import HashNoData from '@/components/common/HasNoData.vue'
 import SelectUserDialog from '@/components/common/SelectUserDialog.vue'
-import { groupStore, userStore, messageStore, userCardStore, groupCardStore } from '@/stores'
+import {
+  useGroupStore,
+  useUserStore,
+  useMessageStore,
+  useUserCardStore,
+  useGroupCardStore
+} from '@/stores'
 import { combineId } from '@/js/utils/common'
 import { userQueryService } from '@/api/user'
 import { ElLoading, ElMessage } from 'element-plus'
@@ -15,11 +21,11 @@ import { MsgType } from '@/proto/msg'
 
 const props = defineProps(['tab', 'params'])
 
-const groupData = groupStore()
-const userData = userStore()
-const messageData = messageStore()
-const userCardData = userCardStore()
-const groupCardData = groupCardStore()
+const groupData = useGroupStore()
+const userData = useUserStore()
+const messageData = useMessageStore()
+const userCardData = useUserCardStore()
+const groupCardData = useGroupCardStore()
 const searchKey = ref('')
 const searchData = ref([])
 const isShowSelectDialog = ref(false)

src/views/contactList/group/sub/SubPartition.vue

@@ -2,7 +2,7 @@
 import { ref, computed, watch, onMounted } from 'vue'
 import { Search, MoreFilled } from '@element-plus/icons-vue'
 import SubCommon from '../components/SubCommon.vue'
-import { messageStore, groupCardStore, groupStore } from '@/stores'
+import { useMessageStore, useGroupCardStore, useGroupStore } from '@/stores'
 import { PARTITION_TYPE } from '@/const/commonConst'
 import {
   msgCreatePartitionService,
@@ -19,9 +19,9 @@ import { highLightedText } from '@/js/utils/common'
 import { MsgType } from '@/proto/msg'
 import { groupInfoService } from '@/api/group'
 
-const messageData = messageStore()
-const groupCardData = groupCardStore()
-const groupData = groupStore()
+const messageData = useMessageStore()
+const groupCardData = useGroupCardStore()
+const groupData = useGroupStore()
 
 const partitionSearchKey = ref('')
 const isShowAddPartitionDialog = ref(false)

src/views/contactList/user/components/ContactListUserItem.vue

@@ -4,13 +4,13 @@ import { ChatRound, Phone, VideoCamera, Edit, Delete, Check, Close } from '@elem
 import ContactItem from '@/components/item/ContactItem.vue'
 import { sessionShowTime } from '@/js/utils/common'
 import router from '@/router'
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 import { ElMessage } from 'element-plus'
 
 const props = defineProps(['type', 'session', 'partitions', 'keyWords'])
 const emit = defineEmits(['showUserCard'])
 
-const messageData = messageStore()
+const messageData = useMessageStore()
 
 const markEditing = ref(false)
 const newMark = ref('')

src/views/contactList/user/sub/SubAll.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { userQueryService } from '@/api/user'
-import { messageStore, userCardStore } from '@/stores'
+import { useMessageStore, useUserCardStore } from '@/stores'
 import ContactListUserItem from '@/views/contactList/user/components/ContactListUserItem.vue'
 import { ElLoading } from 'element-plus'
 import { el_loading_options } from '@/const/commonConst'
@@ -9,8 +9,8 @@ import { Search } from '@element-plus/icons-vue'
 import HashNoData from '@/components/common/HasNoData.vue'
 import { MsgType } from '@/proto/msg'
 
-const messageData = messageStore()
-const userCardData = userCardStore()
+const messageData = useMessageStore()
+const userCardData = useUserCardStore()
 
 const totalCount = computed(() => {
   return Object.keys(allData.value).length

src/views/contactList/user/sub/SubMark.vue

@@ -1,7 +1,7 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
 import { userQueryService } from '@/api/user'
-import { messageStore, userCardStore } from '@/stores'
+import { useMessageStore, useUserCardStore } from '@/stores'
 import ContactListUserItem from '@/views/contactList/user/components/ContactListUserItem.vue'
 import { ElLoading } from 'element-plus'
 import { el_loading_options } from '@/const/commonConst'
@@ -9,8 +9,8 @@ import { Search } from '@element-plus/icons-vue'
 import HashNoData from '@/components/common/HasNoData.vue'
 import { MsgType } from '@/proto/msg'
 
-const messageData = messageStore()
-const userCardData = userCardStore()
+const messageData = useMessageStore()
+const userCardData = useUserCardStore()
 const totalCount = computed(() => {
   return Object.keys(markData.value).length
 })

src/views/contactList/user/sub/SubPartition.vue

@@ -14,16 +14,16 @@ import {
 } from '@/api/message'
 import { PARTITION_TYPE } from '@/const/commonConst'
 import { ElMessage, ElMessageBox } from 'element-plus'
-import { messageStore, userStore, userCardStore } from '@/stores'
+import { useMessageStore, useUserStore, useUserCardStore } from '@/stores'
 import { ElLoading } from 'element-plus'
 import { el_loading_options } from '@/const/commonConst'
 import SelectUserDialog from '@/components/common/SelectUserDialog.vue'
 import { combineId, highLightedText } from '@/js/utils/common'
 import { MsgType } from '@/proto/msg'
 
-const messageData = messageStore()
-const userData = userStore()
-const userCardData = userCardStore()
+const messageData = useMessageStore()
+const userData = useUserStore()
+const userCardData = useUserCardStore()
 const partitionSearchKey = ref('')
 const userSearchKey = ref('')
 const isShowAddPartitionDialog = ref(false)

src/views/layout/LayoutContainer.vue

@@ -8,7 +8,7 @@ import {
 } from '@element-plus/icons-vue'
 import { onMounted, onUnmounted, ref, computed } from 'vue'
 import ContactUs from '@/views/layout/components/ContactUs.vue'
-import { userStore, messageStore, searchStore, groupStore } from '@/stores'
+import { useUserStore, useMessageStore, useSearchStore, useGroupStore } from '@/stores'
 import router from '@/router'
 import MyCard from '@/views/layout/components/MyCard.vue'
 import NaviMenu from '@/views/layout/components/NaviMenu.vue'
@@ -30,10 +30,10 @@ import githubIcon from '@/assets/svg/github.svg'
 import SourceCode from '@/views/layout/components/SourceCode.vue'
 
 const myAvatar = ref()
-const userData = userStore()
-const messageData = messageStore()
-const searchData = searchStore()
-const groupData = groupStore()
+const userData = useUserStore()
+const messageData = useMessageStore()
+const searchData = useSearchStore()
+const groupData = useGroupStore()
 const isShowMyCard = ref(false)
 const contactUsRef = ref(null)
 const sourceCodeRef = ref(null)

src/views/layout/components/MyCard.vue

@@ -1,14 +1,14 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
 import { Close, Male, Female } from '@element-plus/icons-vue'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import default_avatar from '@/assets/image/default_avatar.png'
 import router from '@/router'
 
 const props = defineProps(['isShow'])
 const emit = defineEmits(['close'])
 
-const userData = userStore()
+const userData = useUserStore()
 
 const truncatedSignature = computed(() => {
   const signature = userData.user.signature || '您还没有个性签名。'

src/views/meeting/MeetingLayout.vue

@@ -1,8 +1,8 @@
 <script setup>
 import { onMounted } from 'vue'
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 
-const messageData = messageStore()
+const messageData = useMessageStore()
 
 onMounted(async () => {
   await messageData.loadSessionList()

src/views/message/MessageLayout.vue

@@ -19,12 +19,12 @@ import MessageItem from '@/views/message/components/MessageItem.vue'
 import SessionTag from '@/views/message/components/SessionTag.vue'
 import SelectUserDialog from '@/components/common/SelectUserDialog.vue'
 import {
-  userStore,
-  settingStore,
-  messageStore,
-  userCardStore,
-  groupCardStore,
-  groupStore
+  useUserStore,
+  useSettingStore,
+  useMessageStore,
+  useUserCardStore,
+  useGroupCardStore,
+  useGroupStore
 } from '@/stores'
 import backgroupImage from '@/assets/svg/messagebx_bg.svg'
 import {
@@ -50,12 +50,12 @@ import HashNoData from '@/components/common/HasNoData.vue'
 import InputRecorder from '@/views/message/components/InputRecorder.vue'
 import { playMsgSend } from '@/js/utils/audio'
 
-const userData = userStore()
-const settingData = settingStore()
-const messageData = messageStore()
-const userCardData = userCardStore()
-const groupCardData = groupCardStore()
-const groupData = groupStore()
+const userData = useUserStore()
+const settingData = useSettingStore()
+const messageData = useMessageStore()
+const userCardData = useUserCardStore()
+const groupCardData = useGroupCardStore()
+const groupData = useGroupStore()
 const sessionListRef = ref()
 
 const asideWidth = ref(0)

src/views/message/components/InputEditor.vue

@@ -3,7 +3,7 @@ import { QuillEditor, Delta, Quill } from '@vueup/vue-quill'
 import '@vueup/vue-quill/dist/vue-quill.snow.css'
 import { onMounted, onUnmounted, onBeforeUnmount, ref, watch } from 'vue'
 import { v4 as uuidv4 } from 'uuid'
-import { messageStore, imageStore } from '@/stores'
+import { useMessageStore, useImageStore } from '@/stores'
 import { ElMessage, ElLoading } from 'element-plus'
 import { emojiTrans, getEmojiHtml } from '@/js/utils/emojis'
 import { base64ToFile } from '@/js/utils/common'
@@ -12,8 +12,8 @@ import { el_loading_options } from '@/const/commonConst'
 
 const props = defineProps(['sessionId', 'draft'])
 const emit = defineEmits(['sendMessage'])
-const messageData = messageStore()
-const imageData = imageStore()
+const messageData = useMessageStore()
+const imageData = useImageStore()
 
 const editorRef = ref()
 

src/views/message/components/InputRecorder.vue

@@ -2,7 +2,7 @@
 import { ref, onMounted, onUnmounted, watch, computed } from 'vue'
 import { Microphone } from '@element-plus/icons-vue'
 import { ElLoading, ElMessage } from 'element-plus'
-import { audioStore } from '@/stores'
+import { useAudioStore } from '@/stores'
 import { mtsUploadService } from '@/api/mts'
 import { el_loading_options } from '@/const/commonConst'
 import { v4 as uuidv4 } from 'uuid'
@@ -10,7 +10,7 @@ import { v4 as uuidv4 } from 'uuid'
 const props = defineProps(['sessionId'])
 const emit = defineEmits(['exit', 'sendRecording'])
 
-const audioData = audioStore()
+const audioData = useAudioStore()
 const spaceDown = ref(false) // 空格键是否被按下
 const isRecord = ref(false) // 是否开始录音
 const isCancel = ref(false) // 取消发送

src/views/message/components/InputToolBar.vue

@@ -10,7 +10,13 @@ import VoteIcon from '@/assets/svg/vote.svg'
 import EmojiBox from './EmojiBox.vue'
 import InputTool from '@/views/message/components/InputTool.vue'
 import { mtsUploadService } from '@/api/mts'
-import { messageStore, imageStore, audioStore, videoStore, documentStore } from '@/stores'
+import {
+  useMessageStore,
+  useImageStore,
+  useAudioStore,
+  useVideoStore,
+  useDocumentStore
+} from '@/stores'
 import { el_loading_options } from '@/const/commonConst'
 import { MsgType } from '@/proto/msg'
 
@@ -24,11 +30,11 @@ const emit = defineEmits([
   'showRecorder'
 ])
 
-const messageData = messageStore()
-const imageData = imageStore()
-const audioData = audioStore()
-const videoData = videoStore()
-const documentData = documentStore()
+const messageData = useMessageStore()
+const imageData = useImageStore()
+const audioData = useAudioStore()
+const videoData = useVideoStore()
+const documentData = useDocumentStore()
 const isShowEmojiBox = ref(false)
 
 const onSelectedFile = (file) => {

src/views/message/components/MemberMenu.vue

@@ -12,13 +12,13 @@ import AtIcon from '@/assets/svg/at.svg'
 import adminIcon from '@/assets/svg/administrator.svg'
 import DeleteIcon from '@/assets/svg/delete.svg'
 import TransferIcon from '@/assets/svg/transfer.svg'
-import { userStore, groupStore } from '@/stores'
+import { useUserStore, useGroupStore } from '@/stores'
 
 const props = defineProps(['groupId', 'account'])
 const emit = defineEmits(['selectMenu'])
 
-const userData = userStore()
-const groupData = groupStore()
+const userData = useUserStore()
+const groupData = useGroupStore()
 
 const myAccount = computed(() => userData.user.account)
 

src/views/message/components/MessageGroupRightSide.vue

@@ -2,18 +2,24 @@
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { MsgType } from '@/proto/msg'
 import { Edit, Search } from '@element-plus/icons-vue'
-import { userStore, settingStore, messageStore, groupStore, groupCardStore } from '@/stores'
+import {
+  useUserStore,
+  useSettingStore,
+  useMessageStore,
+  useGroupStore,
+  useGroupCardStore
+} from '@/stores'
 import DragLine from '@/components/common/DragLine.vue'
 import GroupMembersTable from '@/components/common/GroupMembersTable.vue'
 
 const props = defineProps(['sessionId'])
 const emit = defineEmits(['showGroupCard', 'openSession'])
 
-const userData = userStore()
-const settingData = settingStore()
-const messageData = messageStore()
-const groupData = groupStore()
-const groupCardData = groupCardStore()
+const userData = useUserStore()
+const settingData = useSettingStore()
+const messageData = useMessageStore()
+const groupData = useGroupStore()
+const groupCardData = useGroupCardStore()
 
 const msgGroupRightSideWidth = ref(0)
 const announcementInSideHeight = ref(0)

src/views/message/components/MessageItem.vue

@@ -3,14 +3,14 @@ import { computed, onMounted, h, createApp, watch, nextTick, reactive } from 'vu
 import { WarningFilled } from '@element-plus/icons-vue'
 import { MsgType } from '@/proto/msg'
 import {
-  userStore,
-  messageStore,
-  groupStore,
-  groupCardStore,
-  imageStore,
-  audioStore,
-  videoStore,
-  documentStore
+  useUserStore,
+  useMessageStore,
+  useGroupStore,
+  useGroupCardStore,
+  useImageStore,
+  useAudioStore,
+  useVideoStore,
+  useDocumentStore
 } from '@/stores'
 import { messageSysShowTime, showTimeFormat, jsonParseSafe } from '@/js/utils/common'
 import UserAvatarIcon from '@/components/common/UserAvatarIcon.vue'
@@ -36,14 +36,14 @@ const props = defineProps([
 ])
 const emit = defineEmits(['loadMore', 'showUserCard', 'showGroupCard', 'resendMsg', 'loadFinished'])
 
-const userData = userStore()
-const messageData = messageStore()
-const groupData = groupStore()
-const groupCardData = groupCardStore()
-const imageData = imageStore()
-const audioData = audioStore()
-const videoData = videoStore()
-const documentData = documentStore()
+const userData = useUserStore()
+const messageData = useMessageStore()
+const groupData = useGroupStore()
+const groupCardData = useGroupCardStore()
+const imageData = useImageStore()
+const audioData = useAudioStore()
+const videoData = useVideoStore()
+const documentData = useDocumentStore()
 
 onMounted(() => {
   rendering()

src/views/message/components/SessionItem.vue

@@ -6,7 +6,7 @@ import SessionTag from './SessionTag.vue'
 import { jsonParseSafe, sessionShowTime } from '@/js/utils/common'
 import { Top, MuteNotification } from '@element-plus/icons-vue'
 import { MsgType } from '@/proto/msg'
-import { userStore, messageStore, groupStore } from '@/stores'
+import { useUserStore, useMessageStore, useGroupStore } from '@/stores'
 import { msgChatCloseSessionService } from '@/api/message'
 import router from '@/router'
 import { ElMessage } from 'element-plus'
@@ -26,9 +26,9 @@ const emit = defineEmits([
   'noneSelected',
   'showUpdateMarkDialog'
 ])
-const messageData = messageStore()
-const groupData = groupStore()
-const userData = userStore()
+const messageData = useMessageStore()
+const groupData = useGroupStore()
+const userData = useUserStore()
 const myAccount = computed(() => userData.user.account)
 const sessionInfo = computed(() => {
   return messageData.sessionList[props.sessionId]

src/views/message/components/SessionMenu.vue

@@ -1,12 +1,12 @@
 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import { Top, Bottom, MuteNotification, Bell, CircleClose, Edit } from '@element-plus/icons-vue'
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 
 const props = defineProps(['sessionId'])
 const emit = defineEmits(['selectMenu', 'closeMenu'])
 
-const messageData = messageStore()
+const messageData = useMessageStore()
 
 const top = computed(() => {
   if (props.sessionId) {

src/views/setting/SettingLayout.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { onMounted } from 'vue'
 import { User, Key, Bell } from '@element-plus/icons-vue'
-import { messageStore } from '@/stores'
+import { useMessageStore } from '@/stores'
 
-const messageData = messageStore()
+const messageData = useMessageStore()
 
 onMounted(async () => {
   await messageData.loadSessionList()

src/views/setting/components/EditEmail.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, onBeforeUnmount, onMounted } from 'vue'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { userModifySelfService } from '@/api/user'
 import { ElMessage } from 'element-plus'
 
 defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue', 'success'])
 
-const userData = userStore()
+const userData = useUserStore()
 
 const form = ref()
 const formModel = ref({

src/views/setting/components/EditPassword.vue

@@ -2,12 +2,12 @@
 import { ref } from 'vue'
 import { userModifyPassword } from '@/api/user'
 import { ElMessage } from 'element-plus'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 
 defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue'])
 
-const userData = userStore()
+const userData = useUserStore()
 
 const form = ref()
 const formModel = ref({

src/views/setting/components/EditPhone.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, onBeforeUnmount, onMounted } from 'vue'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { userModifySelfService } from '@/api/user'
 import { ElMessage } from 'element-plus'
 
 defineProps(['modelValue'])
 const emit = defineEmits(['update:modelValue', 'success'])
 
-const userData = userStore()
+const userData = useUserStore()
 
 const form = ref()
 const formModel = ref({

src/views/setting/sub/SettingNotify.vue

@@ -1,9 +1,9 @@
 <script setup>
 import { ref, onMounted } from 'vue'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { userModifySelfService } from '@/api/user'
 
-const userData = userStore()
+const userData = useUserStore()
 
 const isNewMsgTips = ref()
 const isSendMsgTips = ref()

src/views/setting/sub/SettingPersonal.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { ref, onMounted, computed } from 'vue'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import router from '@/router'
 import { userModifySelfService } from '@/api/user'
 import defaultImg from '@/assets/image/select_avatar.jpg'
@@ -9,7 +9,7 @@ import { maskPhoneNum, showTimeFormatDay } from '@/js/utils/common'
 import EditAvatar from '@/components/common/EditAvatar.vue'
 import { ElMessage } from 'element-plus'
 
-const userData = userStore()
+const userData = useUserStore()
 // 准备表单数据
 const formModel = ref({})
 const avatarUrl = ref(userData.user.avatar)

src/views/setting/sub/SettingSecurity.vue

@@ -1,13 +1,13 @@
 <script setup>
 import { ref, computed } from 'vue'
-import { userStore } from '@/stores'
+import { useUserStore } from '@/stores'
 import { maskPhoneNum } from '@/js/utils/common'
 import EditEmail from '@/views/setting/components/EditEmail.vue'
 import EditPassword from '@/views/setting/components/EditPassword.vue'
 import EditPhone from '@/views/setting/components/EditPhone.vue'
 import { ElMessage } from 'element-plus'
 
-const userData = userStore()
+const userData = useUserStore()
 const isShowEditPassword = ref(false)
 const isShowEditPhone = ref(false)
 const isShowEditEmail = ref(false)