移除vuex

package.json

@@ -22,8 +22,7 @@
     "vue": "3.4.21",
     "vue-masonry": "0.16.0",
     "vue-router": "4.3.0",
-    "vue-switches": "2.0.1",
-    "vuex": "4.1.0"
+    "vue-switches": "2.0.1"
   },
   "devDependencies": {
     "@iconify/vue": "^4.1.1",

pnpm-lock.yaml

@@ -50,9 +50,6 @@ dependencies:
   vue-switches:
     specifier: 2.0.1
     version: 2.0.1
-  vuex:
-    specifier: 4.1.0
-    version: 4.1.0(vue@3.4.21)
 
 devDependencies:
   '@iconify/vue':
@@ -4887,15 +4884,6 @@ packages:
       '@vue/server-renderer': 3.4.21(vue@3.4.21)
       '@vue/shared': 3.4.21
 
-  /vuex@4.1.0(vue@3.4.21):
-    resolution: {integrity: sha512-hmV6UerDrPcgbSy9ORAtNXDr9M4wlNP4pEFKye4ujJF8oqgFFuxDCdOLS3eNoRTtq5O3hoBDh9Doj1bQMYHRbQ==}
-    peerDependencies:
-      vue: ^3.2.0
-    dependencies:
-      '@vue/devtools-api': 6.5.1
-      vue: 3.4.21
-    dev: false
-
   /webidl-conversions@3.0.1:
     resolution: {integrity: sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==}
     requiresBuild: true

src/App.vue

@@ -13,12 +13,10 @@
 * try {navigator.control.gesture(false);} catch (e) {} //UC浏览器关闭默认手势事件
 try {navigator.control.longpressMenu(false);} catch (e) {} //关闭长按弹出菜单
 * */
-import {mapState} from "vuex";
+import {mapActions, mapState} from "pinia";
 import routes from "./router/routes";
 import Call from "./components/Call";
 import {useBaseStore} from "@/store/pinia";
-import {mapActions} from 'pinia'
-
 
 export default {
   name: 'App',
@@ -31,12 +29,13 @@ export default {
     }
   },
   computed: {
-    ...mapState(['excludeRoutes']),
+    ...mapState(useBaseStore, ['excludeRoutes']),
   },
   // watch $route 决定使用哪种过渡
   watch: {
     '$route'(to, from) {
-      this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
+      // this.$store.commit('setMaskDialog', {state: false, mode: this.maskDialogMode})
+      this.setMaskDialog({state: false, mode: this.maskDialogMode})
 
       //footer下面的5个按钮，对跳不要用动画
       let noAnimation = ['/', '/home', '/slide', '/me', '/shop', '/message', '/publish', '/home/live',
@@ -52,7 +51,7 @@ export default {
     },
   },
   methods: {
-    ...mapActions(useBaseStore, ['init']),
+    ...mapActions(useBaseStore, ['init', 'setMaskDialog']),
     setVh() {
       let vh = window.innerHeight * 0.01
       document.documentElement.style.setProperty('--vh', `${vh}px`)

src/components/Comment.vue

@@ -125,11 +125,12 @@
 <script>
 import AutoInput from "./AutoInput";
 import ConfirmDialog from "./dialog/ConfirmDialog";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import FromBottomDialog from "./dialog/FromBottomDialog";
 import Loading from "./Loading";
 import Search from "./Search";
 import {$no} from "@/utils";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "Comment",
@@ -156,7 +157,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['friends'])
+    ...mapState(useBaseStore, ['friends']),
   },
   watch: {
     modelValue(newVale) {

src/components/Share.vue

@@ -158,10 +158,11 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import Check from "./Check";
 import FromBottomDialog from "./dialog/FromBottomDialog";
 import DouyinCode from "./DouyinCode";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "Share",
@@ -192,7 +193,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['friends']),
+    ...mapState(useBaseStore, ['friends']),
     selectFriends() {
       return this.friends.all.filter(v => v.select)
     }

src/components/UserPanel.vue

@@ -143,7 +143,7 @@
         </div>
         <div class="friends"
              @touchmove="stop">
-          <div class="friend" v-for="item in friends.all">
+          <div class="friend" v-for="item in baseStore.friends.all">
             <img :style="item.select?'opacity: .5;':''" class="avatar" :src="_checkImgUrl(item.avatar)" alt="">
             <span class="name">{{ item.name }}</span>
             <span class="tips">可能感兴趣的人</span>
@@ -176,17 +176,17 @@
 </template>
 
 <script setup>
-import {computed, reactive, ref, watch} from "vue";
+import {reactive, ref, watch} from "vue";
 import Utils, {$no, _checkImgUrl, _getUserDouyinId} from "@/utils";
 import {useNav} from "@/utils/hooks/useNav";
-import {useStore} from "vuex";
 import Posters from '@/components/Posters'
 import {DefaultUser} from "@/utils/const_var";
 import Loading from "@/components/Loading.vue";
 import {FILE_URL} from "@/config";
+import {useBaseStore} from "@/store/pinia";
 
 const $nav = useNav()
-const store = useStore()
+const baseStore = useBaseStore()
 const emit = defineEmits(['update:currentItem', 'back'])
 const props = defineProps({
   currentItem: {
@@ -201,7 +201,6 @@ const props = defineProps({
     default: false
   }
 })
-const friends = computed(() => store.state.friends)
 const main = ref(null)
 const page = ref(null)
 const cover = ref(null)

src/components/slide/SlideVerticalInfinite.vue

@@ -1,12 +1,12 @@
 <script setup lang="jsx">
-import {computed, createApp, onMounted, reactive, ref, render, watch} from "vue";
+import {createApp, onMounted, reactive, ref, render, watch} from "vue";
 import GM from '../../utils'
 import {getSlideDistance, slideInit, slideReset, slideTouchEnd, slideTouchMove, slideTouchStart} from "./common";
 import {SlideType} from "@/utils/const_var";
 import SlideItem from '@/components/slide/SlideItem.vue'
 import bus, {EVENT_KEY} from "../../utils/bus";
-import {useStore} from 'vuex'
 import Loading from "@/components/Loading.vue";
+import {useBaseStore} from "@/store/pinia";
 
 const props = defineProps({
   index: {
@@ -62,9 +62,7 @@ const state = reactive({
   move: {x: 0, y: 0},
   wrapper: {width: 0, height: 0, childrenLength: 0}
 })
-const store = useStore()
-const homeRefresh = computed(() => store.state.homeRefresh)
-const judgeValue = computed(() => store.state.judgeValue)
+const baseStore = useBaseStore()
 
 watch(
     () => props.list,
@@ -221,12 +219,12 @@ function touchStart(e) {
 
 //TODO 2022-3-28:在最顶部，反复滑动会抖动一下，初步猜测是因为方向变了，导致的加判断距离变成了减
 function touchMove(e) {
-  slideTouchMove(e, wrapperEl.value, state, judgeValue.value, canNext, null, SlideType.VERTICAL)
+  slideTouchMove(e, wrapperEl.value, state, baseStore.judgeValue, canNext, null, SlideType.VERTICAL)
 }
 
 function touchEnd(e) {
   let isNext = state.move.y < 0
-  if (state.localIndex === 0 && !isNext && state.move.y > (homeRefresh.value + judgeValue.value)) {
+  if (state.localIndex === 0 && !isNext && state.move.y > (baseStore.homeRefresh + baseStore.judgeValue)) {
     emit('refresh')
   }
   slideTouchEnd(e, state, canNext, (isNext) => {

src/main.js

@@ -4,7 +4,6 @@ import mitt from 'mitt'
 import './assets/less/index.less'
 import {startMock} from './mock'
 import router from "./router";
-import store from "./store";
 import mixin from "./utils/mixin";
 import VueLazyload from '@jambonn/vue-lazyload'
 import {VueMasonryPlugin} from "vue-masonry";
@@ -28,7 +27,6 @@ app.use(VueLazyload, {
 })
 app.use(VueMasonryPlugin)
 app.use(router)
-app.use(store)
 app.use(pinia)
 app.mount('#app')
 

src/pages/home/Publish.vue

@@ -51,7 +51,8 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
 
 
 //访问用户媒体设备的兼容方法
@@ -81,7 +82,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['bodyHeight', 'bodyWidth'])
+    ...mapState(useBaseStore,['bodyHeight', 'bodyWidth'])
   },
   mounted() {
     //获得video摄像头区域

src/pages/home/components/IndicatorHome.vue

@@ -50,7 +50,8 @@
 <script>
 import Loading from "../../../components/Loading.vue";
 import bus from "../../../utils/bus";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "IndicatorHome",
@@ -84,7 +85,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['judgeValue', 'homeRefresh']),
+    ...mapState(useBaseStore,['judgeValue', 'homeRefresh']),
     tabOneClass() {
       return {active: this.index === 0, open: this.open}
     },

src/pages/home/components/ShareTo.vue

@@ -9,9 +9,9 @@
     <div class="option-dialog">
       <div class="buttons">
         <dy-button v-if="downloading"
-                  class="mb1r"
-                  :border="false"
-                  :progress="progress">
+                   class="mb1r"
+                   :border="false"
+                   :progress="progress">
           <img src="../../../assets/img/icon/components/video/download-gray.png" alt="">
           <span class="second-text-color">下载中 9.2MB/{{ progress }}%</span>
         </dy-button>
@@ -116,7 +116,8 @@
 </template>
 <script>
 import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
 /*
 * 分享到各种工具
 * */
@@ -163,7 +164,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['friends']),
+    ...mapState(useBaseStore, ['friends']),
   },
   created() {
   },

src/pages/home/components/ShareToFriend.vue

@@ -96,9 +96,10 @@
 </template>
 <script>
 import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import Search from "../../../components/Search";
 import Check from "../../../components/Check";
+import {useBaseStore} from "@/store/pinia";
 /*
 分享给朋友
 * */
@@ -152,7 +153,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['friends']),
+    ...mapState(useBaseStore, ['friends']),
     selectFriends() {
       return this.localFriends.filter(v => v.shared)
     }

src/pages/home/components/VideoShare.vue

@@ -41,7 +41,7 @@
           <div class="right">
             <span>{{ item.name }}</span>
             <dy-button size="small" :type="item.shared?'dark':'primary'"
-                      @click="item.shared = true">
+                       @click="item.shared = true">
               {{ item.shared ? '已' : '' }}分享
             </dy-button>
           </div>
@@ -56,9 +56,10 @@
 </template>
 
 <script lang="jsx">
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import FromBottomDialog from "../../../components/dialog/FromBottomDialog";
 import LoadingCircle from "./LoadingCircle";
+import {useBaseStore} from "@/store/pinia";
 // import DouyinCode from "./DouyinCode";
 
 export default {
@@ -189,7 +190,7 @@ export default {
     },
   },
   computed: {
-    ...mapState(['friends']),
+    ...mapState(useBaseStore, ['friends']),
   },
   watch: {
     modelValue(newVal) {

src/pages/home/index.vue

@@ -96,7 +96,7 @@
       <SlideItem>
         <IndicatorHome
             v-if="!state.fullScreen"
-            :loading="loading"
+            :loading="baseStore.loading"
             name="main"
             @showSlidebar="state.baseIndex = 0"
             v-model:index="state.navIndex"
@@ -196,10 +196,9 @@ import SlideItem from '@/components/slide/SlideItem.vue'
 import Comment from "../../components/Comment.vue";
 import Share from "../../components/Share.vue";
 import IndicatorHome from "./components/IndicatorHome.vue";
-import {computed, onMounted, onUnmounted, reactive} from "vue";
+import {onMounted, onUnmounted, reactive} from "vue";
 import bus, {EVENT_KEY} from "../../utils/bus";
 import {useNav} from "@/utils/hooks/useNav";
-import {useStore} from "vuex";
 import PlayFeedback from "@/pages/home/components/PlayFeedback.vue";
 import ShareTo from "@/pages/home/components/ShareTo.vue";
 import DouyinCode from "../../components/DouyinCode.vue";
@@ -217,13 +216,10 @@ import Slide4 from "@/pages/home/slide/Slide4.vue";
 import {DefaultUser} from "@/utils/const_var";
 import {$no} from "@/utils";
 import LongVideo from "@/pages/home/slide/LongVideo.vue";
+import {useBaseStore} from "@/store/pinia";
 
 const nav = useNav()
-const store = useStore()
-const loading = computed(() => store.state.loading)
-const friends = computed(() => store.state.friends)
-const bodyHeight = computed(() => store.state.bodyHeight)
-const bodyWidth = computed(() => store.state.bodyWidth)
+const baseStore = useBaseStore()
 
 const state = reactive({
   baseIndex: 1,

src/pages/home/slide/LongVideo.vue

@@ -1,12 +1,11 @@
 <script setup>
 
-import {computed, onMounted, onUnmounted, reactive, ref, watch} from "vue";
-import {useStore} from "vuex";
+import {onMounted, onUnmounted, reactive, watch} from "vue";
 import {_checkImgUrl, _duration, _formatNumber} from "@/utils";
 import {recommendedVideo} from "@/api/videos";
+import {useBaseStore} from "@/store/pinia";
 
-const store = useStore()
-const loading = computed(() => store.state.loading)
+const baseStore = useBaseStore()
 
 const props = defineProps({
   active: Boolean
@@ -18,7 +17,6 @@ const p = {
   }
 }
 
-const listRef = ref(null)
 const state = reactive({
   index: 0,
   list: [],
@@ -28,18 +26,18 @@ const state = reactive({
 })
 
 function loadMore() {
-  if (!loading.value) {
+  if (!baseStore.loading) {
     state.pageNo++
     getData()
   }
 }
 
 async function getData(refresh = false) {
-  if (loading.value) return
-  store.commit('setLoading', true)
+  if (baseStore.loading) return
+  baseStore.loading = true
   let res = await recommendedVideo({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize})
   console.log('getSlide4Data-', 'refresh', refresh, res)
-  store.commit('setLoading', false)
+  baseStore.loading = false
   if (res.code === 200) {
     state.totalSize = res.data.total
     if (refresh) {
@@ -53,7 +51,7 @@ async function getData(refresh = false) {
 
 watch(() => props.active, n => {
   if (!state.list.length && n) {
-    store.commit('setLoading', false)
+    baseStore.loading = false
     getData()
   }
 })
@@ -86,7 +84,7 @@ onUnmounted(() => {
       </div>
       <div class="bottom">
         <div class="l">
-          <img v-lazy="item.author.avatar_168x168.url_list[0]" alt="" class="avatar">
+          <img v-lazy="_checkImgUrl(item.author.avatar_168x168.url_list[0])" alt="" class="avatar">
           <div class="name">{{ item.author.nickname }}</div>
         </div>
         <div class="r">

src/pages/home/slide/SlideList.vue

@@ -6,7 +6,7 @@
       :uniqueId="state.uniqueId"
       name="main"
       :active="props.active"
-      :loading="loading"
+      :loading="baseStore.loading"
       v-model:index="state.index"
       :render="render"
       :list="state.list"
@@ -17,11 +17,11 @@
 
 <script setup lang="jsx">
 import SlideVerticalInfinite from '@/components/slide/SlideVerticalInfinite.vue'
-import {computed, onMounted, onUnmounted, reactive, ref} from "vue";
+import {onMounted, onUnmounted, reactive, ref} from "vue";
 import bus, {EVENT_KEY} from "@/utils/bus";
-import Utils from "@/utils";
+import {$notice} from "@/utils";
 import {useSlideListItemRender} from "@/utils/hooks/useSlideListItemRender";
-import {useStore} from "vuex";
+import {useBaseStore} from "@/store/pinia";
 
 const props = defineProps({
   cbs: {
@@ -48,8 +48,7 @@ const props = defineProps({
   },
 })
 
-const store = useStore()
-const loading = computed(() => store.state.loading)
+const baseStore = useBaseStore()
 
 const p = {
   onShowComments() {
@@ -69,18 +68,18 @@ const state = reactive({
 })
 
 function loadMore() {
-  if (!loading.value) {
+  if (!baseStore.loading) {
     state.pageNo++
     getData()
   }
 }
 
 async function getData(refresh = false) {
-  if (loading.value) return
-  store.commit('setLoading', true)
+  if (baseStore.loading) return
+  baseStore.loading = true
   let res = await props.api({pageNo: refresh ? 0 : state.pageNo, pageSize: state.pageSize})
   // console.log('getSlide4Data-', 'refresh', refresh, res)
-  store.commit('setLoading', false)
+  baseStore.loading = false
   if (res.code === 200) {
     state.totalSize = res.data.total
     if (refresh) {
@@ -95,7 +94,7 @@ async function getData(refresh = false) {
 function dislike() {
   listRef.value.dislike(state.list[1])
   state.list[state.index] = state.list[1]
-  Utils.$notice('操作成功，将减少此类视频的推荐')
+  $notice('操作成功，将减少此类视频的推荐')
 }
 
 function end() {

src/pages/me/Me.vue

@@ -89,10 +89,10 @@
                 <div v-else class="text" v-html="userinfo.signature"></div>
               </div>
               <div class="more" @click="$nav('/me/edit-userinfo')">
-                <div class="age item" v-if="userinfo.birthday">
-                  <img v-if="userinfo.sex == 0" src="../../assets/img/icon/me/woman.png" alt="">
-                  <img v-if="userinfo.sex == 1" src="../../assets/img/icon/me/man.png" alt="">
-                  <span>{{ filterAge(userinfo.birthday) }}岁</span>
+                <div class="age item" v-if="userinfo.user_age !==-1">
+                  <img v-if="userinfo.gender == 2" src="../../assets/img/icon/me/woman.png" alt="">
+                  <img v-if="userinfo.gender == 1" src="../../assets/img/icon/me/man.png" alt="">
+                  <span>{{ userinfo.user_age }}岁</span>
                 </div>
                 <div class="item" v-if="userinfo.province || userinfo.city">
                   {{ userinfo.province }}
@@ -512,7 +512,7 @@ export default {
         if (videoOb.video.total === -1) {
           this.loadings['loading' + newVal] = true
           let res = await userCollect()
-          console.log('res',res)
+          console.log('res', res)
           if (res.code === this.SUCCESS) this.videos.collect = res.data
         }
       } else {

src/pages/me/MyCard.vue

@@ -8,7 +8,7 @@
     <div class="content">
       <div class="qrcode">
         <img class="qrcode-bg" src="../../assets/img/icon/me/code-bg.png" alt="">
-        <img class="avatar" :src="$imgPreview(userinfo.avatar)" alt="">
+        <img class="avatar" :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="">
       </div>
 
       <span class="name">ZZZZZZZZZZ</span>
@@ -40,9 +40,9 @@
 </template>
 <script>
 import Share from "../../components/Share";
-import ConfirmDialog from "../../components/dialog/ConfirmDialog";
-import ShareToFriend from "../home/components/ShareToFriend";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
+import {_checkImgUrl} from "@/utils";
 
 export default {
   name: "MyCard",
@@ -82,9 +82,10 @@ export default {
 
   },
   computed: {
-    ...mapState(['userinfo'])
+    ...mapState(useBaseStore,['userinfo'])
   },
   methods: {
+    _checkImgUrl,
     delayShowDialog(cb) {
       setTimeout(() => {
         cb()

src/pages/me/MyMusic.vue

@@ -112,7 +112,7 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import Switches from "../message/components/swtich/switches";
 import SlideItemMusic from "./components/SlideItemMusic";
 import IndicatorLight from "../../components/slide/IndicatorLight";
@@ -121,6 +121,7 @@ import GuessMusic from "./components/GuessMusic";
 import CollectMusic from "./components/CollectMusic";
 import Loading from "../../components/Loading";
 import {userCollect} from "@/api/user";
+import {useBaseStore} from "@/store/pinia";
 
 //TODO 两个page页面的播放冲突未做
 export default {
@@ -163,7 +164,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['bodyWidth']),
+    ...mapState(useBaseStore,['bodyWidth']),
     page2Music() {
       return this.collectMusic.concat(this.recommendMusic)
     }

src/pages/me/MyRequestUpdate.vue

@@ -21,8 +21,9 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "MyRequestUpdate",
@@ -31,7 +32,7 @@ export default {
     return {}
   },
   computed: {
-    ...mapState(['friends'])
+    ...mapState(useBaseStore, ['friends']),
   },
   created() {
   },

src/pages/me/RequestUpdate.vue

@@ -58,8 +58,9 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "RequestUpdate",
@@ -72,7 +73,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['friends'])
+    ...mapState(useBaseStore,['friends'])
   },
   created() {
     this.getData()

src/pages/me/collect/MusicCollect.vue

@@ -54,8 +54,9 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import {userCollect} from "@/api/user";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "MusicCollect",
@@ -72,7 +73,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['bodyWidth'])
+    ...mapState(useBaseStore,['bodyWidth'])
   },
   created() {
     this.getData()

src/pages/me/userinfo/AddSchool.vue

@@ -52,16 +52,19 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
+import {mapState} from 'pinia'
 import enums from '../../../utils/enums'
 import {inject} from "vue";
 import MobileSelect from "../../../components/mobile-select/mobile-select";
-import ConfirmDialog from "../../../components/dialog/ConfirmDialog";
-import Loading from "../../../components/Loading";
+import {useBaseStore} from "@/store/pinia";
 
 //TODO 年份选择器没做
 export default {
   name: "AddSchool",
+  setup() {
+    const baseStore = useBaseStore()
+    return {baseStore}
+  },
   data() {
     return {
       mitt: inject('mitt'),
@@ -88,6 +91,7 @@ export default {
     // localStorage.clear()
   },
   computed: {
+    ...mapState(useBaseStore, ['userinfo']),
     isChanged() {
       if (this.school.name !== this.localSchool.name) return true
       if (this.school.department !== this.localSchool.department) return true
@@ -100,10 +104,9 @@ export default {
       if (this.localSchool.displayType === enums.DISPLAY_TYPE.SCHOOL) return '校友可见'
       if (this.localSchool.displayType === enums.DISPLAY_TYPE.ME) return '仅自己可见'
     },
-    ...mapState({
-      userinfo: 'userinfo',
-      school: state => state.userinfo.school,
-    })
+    school() {
+      return this.userinfo.school
+    },
   },
   methods: {
     showJoinTimeDialog() {
@@ -150,7 +153,7 @@ export default {
       if (!this.isChanged) return
       this.$showLoading()
       let data = {...this.userinfo, ...{school: this.localSchool}}
-      this.$store.commit('setUserinfo', data)
+      this.baseStore.setUserinfo(data)
       await this.$sleep(500)
       this.$hideLoading()
       localStorage.clear()

src/pages/me/userinfo/ChooseCity.vue

@@ -17,10 +17,15 @@
 
 <script>
 
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "ChooseProvince",
+  setup() {
+    const baseStore = useBaseStore()
+    return {baseStore}
+  },
   data() {
     return {
       list: [
@@ -49,15 +54,13 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      userinfo: 'userinfo',
-    })
+    ...mapState(useBaseStore, ['userinfo'])
   },
   methods: {
     async save(item) {
       this.$showLoading()
       let data = {...this.userinfo, ...{location: '中国-四川-成都'}}
-      this.$store.commit('setUserinfo', data)
+      this.baseStore.setUserinfo(data)
       await this.$sleep(500)
       this.$hideLoading()
       history.go(-3)

src/pages/me/userinfo/ChooseDepartment.vue

@@ -21,9 +21,7 @@
 </template>
 
 <script>
-import {mapState} from 'vuex'
 import Search from '../../../components/Search'
-import {inject} from "vue";
 
 export default {
   name: "ChooseSchool",

src/pages/me/userinfo/ChooseLocation.vue

@@ -40,10 +40,16 @@
 </template>
 
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
+import {_sleep} from "@/utils";
 
 export default {
   name: "ChooseLocation",
+  setup() {
+    const baseStore = useBaseStore()
+    return {baseStore}
+  },
   data() {
     return {
       countryOk: {
@@ -1183,9 +1189,7 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      userinfo: 'userinfo',
-    })
+    ...mapState(useBaseStore, ['userinfo'])
   },
   mounted() {
     for (let type in this.countryOk) {
@@ -1196,8 +1200,8 @@ export default {
     async save(item) {
       this.$showLoading()
       let data = {...this.userinfo, ...{location: '暂不设置'}}
-      this.$store.commit('setUserinfo', data)
-      await this.$sleep(500)
+      this.baseStore.setUserinfo(data)
+      await _sleep(500)
       this.$hideLoading()
       this.$back()
     }

src/pages/me/userinfo/EditUserInfo.vue

@@ -11,7 +11,7 @@
     <div class="userinfo">
       <div class="change-avatar">
         <div class="avatar-ctn" @click="showAvatarDialog">
-          <img class="avatar" :src="$imgPreview(userinfo.avatar)" alt="">
+          <img class="avatar" :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="">
           <img class="change" src="../../../assets/img/icon/me/camera-light.png" alt="">
         </div>
         <span>点击更换头像</span>
@@ -26,28 +26,28 @@
       <div class="row" @click="$nav('/me/edit-userinfo-item',{type:2})">
         <div class="left">抖音号</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.unique_id) }}</span>
+          <span>{{ isEmpty(_getUserDouyinId({author: userinfo})) }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('/me/edit-userinfo-item',{type:3})">
         <div class="left">简介</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.desc) }}</span>
+          <span>{{ isEmpty(userinfo.signature) }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="showSexDialog">
         <div class="left">性别</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.sex) }}</span>
+          <span>{{ sex }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="showBirthdayDialog">
         <div class="left">生日</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.birthday) }}</span>
+          <span>{{ isEmpty(userinfo.user_age) }}</span>
           <div v-show="false" id="trigger1"></div>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
@@ -55,14 +55,20 @@
       <div class="row" @click="$nav('/me/choose-location')">
         <div class="left">所在地</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.location) }}</span>
+          <span v-if="userinfo.province || userinfo.city">
+            {{ userinfo.province }}
+            <template v-if="userinfo.province &&  userinfo.city">
+              -
+            </template>
+            {{ userinfo.city }}
+          </span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
       <div class="row" @click="$nav('/me/add-school')">
         <div class="left">学校</div>
         <div class="right">
-          <span>{{ isEmpty(userinfo.school.name) }}</span>
+          <span>{{ isEmpty(userinfo.school?.name) }}</span>
           <dy-back scale=".8" direction="right"></dy-back>
         </div>
       </div>
@@ -78,10 +84,16 @@
 
 <script>
 import MobileSelect from "../../../components/mobile-select/mobile-select";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
+import {_checkImgUrl, _getUserDouyinId} from "../../../utils";
 
 export default {
   name: "EditUserInfo",
+  setup() {
+    const baseStore = useBaseStore()
+    return {baseStore}
+  },
   components: {},
   data() {
     return {
@@ -100,20 +112,30 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      userinfo: 'userinfo',
-    })
+    ...mapState(useBaseStore, ['userinfo']),
+    sex() {
+      switch (this.userinfo.gender) {
+        case 1:
+          return '男'
+        case 2:
+          return '女'
+        default:
+          return ''
+      }
+    }
   },
   methods: {
+    _checkImgUrl,
+    _getUserDouyinId,
     isEmpty(val) {
-      if (val) return val
+      if (val && val !== -1) return val
       return '点击设置'
     },
     showSexDialog() {
       this.$showSelectDialog(this.sexList, async e => {
         this.$showLoading()
         await this.$sleep(500)
-        this.$store.commit('setUserinfo', {...this.userinfo, sex: e.name})
+        this.baseStore.setUserinfo({...this.userinfo, gender: e.id})
         this.$hideLoading()
       })
     },
@@ -124,7 +146,7 @@ export default {
           case 2:
             return this.$no()
           case 3:
-            this.previewImg = this.userinfo.avatar
+            this.previewImg = _checkImgUrl(this.userinfo.cover_url[0].url_list[0])
             break
         }
       })
@@ -149,7 +171,7 @@ export default {
           console.log(data)
           this.$showLoading()
           await this.$sleep(500)
-          this.$store.commit('setUserinfo', {...this.userinfo, birthday: data.join('-')})
+          this.baseStore.setUserinfo({...this.userinfo, birthday: data.join('-')})
           this.$hideLoading()
           // this.localSchool.joinTime = ~~data[0]
         }

src/pages/me/userinfo/EditUserInfoItem.vue

@@ -18,7 +18,7 @@
         <div class="notice">我的名字</div>
         <div class="input-ctn" style="margin-bottom: 1rem;">
           <input type="text" v-model="localUserinfo.nickname" placeholder="记得填写名字哦">
-            <img v-if="localUserinfo.nickname"
+          <img v-if="localUserinfo.nickname"
                style="transform: scale(2)"
                class="close" src="../../../assets/img/icon/newicon/close-and-bg.png" alt=""
                @click="localUserinfo.nickname = ''">
@@ -40,7 +40,7 @@
         <div class="notice">个人简介</div>
         <div class="textarea-ctn">
         <textarea name="" id="" cols="30" rows="10"
-                  v-model="localUserinfo.desc"
+                  v-model="localUserinfo.signature"
                   placeholder="你可以填写兴趣爱好、心情愿望，有趣的介绍能让被关注的概率变高噢！"></textarea>
         </div>
       </div>
@@ -52,15 +52,20 @@
 
 //TODO 1、数据变了后，保存按钮变亮；2、数据变了，点返回，弹窗是否确认
 
-import MobileSelect from "../../../components/mobile-select/mobile-select";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
+import {cloneDeep} from "@/utils";
 
 export default {
   name: "EditUserInfo",
+  setup() {
+    const baseStore = useBaseStore()
+    return {baseStore}
+  },
   data() {
     return {
       type: 1,
-      localUserinfo: this.$clone(this.$store.state.userinfo)
+      localUserinfo: {}
     }
   },
   computed: {
@@ -71,11 +76,10 @@ export default {
       if (this.userinfo.desc !== this.localUserinfo.desc) return true
       return this.userinfo.unique_id !== this.localUserinfo.unique_id;
     },
-    ...mapState({
-      userinfo: 'userinfo',
-    })
+    ...mapState(useBaseStore, ['userinfo']),
   },
   created() {
+    this.localUserinfo = cloneDeep(this.userinfo)
     this.type = Number(this.$route.query.type)
   },
   methods: {
@@ -92,7 +96,7 @@ export default {
         if (!this.localUserinfo.nickname) return this.$notice('名字不能为空')
       }
       this.$showLoading()
-      this.$store.commit('setUserinfo', this.localUserinfo)
+      this.baseStore.setUserinfo(this.localUserinfo)
       await this.$sleep(500)
       this.$hideLoading()
       this.$back()

src/pages/message/AllMessage.vue

@@ -50,7 +50,7 @@
         <div class="messages">
           <div class="message" @click="$nav('/message/visitors')">
             <div class="left">
-              <img v-lazy="$imgPreview(userinfo.avatar)" alt="" class="avatar">
+              <img v-lazy="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="avatar">
             </div>
             <div class="right">
               <div class="desc">
@@ -64,7 +64,7 @@
                   <div class="time">01-11</div>
                 </div>
               </div>
-              <img v-lazy="$imgPreview(userinfo.avatar)" alt="" class="poster">
+              <img v-lazy="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="poster">
             </div>
           </div>
           <div class="message" v-for="item in showMessageList" @click="$no">
@@ -116,13 +116,15 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import People from "../people/components/People";
 import Scroll from "../../components/Scroll";
 import Loading from "../../components/Loading";
 import Peoples from "../people/components/Peoples";
 import resource from "../../assets/data/resource.js";
 import BasePage from "../BasePage";
+import {useBaseStore} from "@/store/pinia";
+import {_checkImgUrl} from "@/utils";
 
 
 export default {
@@ -146,7 +148,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['userinfo', 'friends']),
+    ...mapState(useBaseStore, ['friends', 'userinfo']),
     showTypeText() {
       switch (this.selectShowType) {
         case 1:
@@ -170,6 +172,7 @@ export default {
     this.getData()
   },
   methods: {
+    _checkImgUrl,
     async getData() {
       this.loading = true
       await this.$sleep(800)

src/pages/message/Fans.vue

@@ -6,85 +6,71 @@
       </template>
     </BaseHeader>
     <div class="content">
-      <Loading v-if="loading"/>
+      <Loading v-if="data.loading"/>
       <Scroll ref="mainScroll" @pulldown="loadData" v-else>
-        <Peoples v-model:list="fans"
-                 :loading="loadingMore"
+        <Peoples v-model:list="data.fans"
+                 :loading="data.loadingMore"
                  mode="fans"/>
         <div class="title">
           <span>朋友推荐</span>
           <img src="../../assets/img/icon/about-gray.png" alt="">
         </div>
-        <Peoples v-model:list="recommend"
-                 :loading="loadingMore"
+        <Peoples v-model:list="data.recommend"
+                 :loading="data.loadingMore"
                  mode="recommend"/>
-        <Loading :is-full-screen="false" v-if="loadingMore"/>
+        <Loading :is-full-screen="false" v-if="data.loadingMore"/>
       </Scroll>
     </div>
   </div>
 </template>
-<script>
-import {mapState} from "vuex";
-import People from "../people/components/People";
-import Scroll from "../../components/Scroll";
-import Loading from "../../components/Loading";
-import Peoples from "../people/components/Peoples";
-import BasePage from "../BasePage";
+<script setup>
+import Scroll from "@/components/Scroll.vue";
+import Peoples from "@/pages/people/components/Peoples.vue";
+import {onMounted, reactive} from "vue";
+import {useBaseStore} from "@/store/pinia";
+import {_sleep, cloneDeep} from "@/utils";
 
-export default {
-  extends: BasePage,
-  name: "Fans",
-  components: {
-    Scroll,
-    People,
-    Loading,
-    Peoples
-  },
-  data() {
-    return {
-      loading: false,
-      loadingMore: false,
-      recommend: [],
-      fans: [],
-    }
-  },
-  computed: {
-    ...mapState(['userinfo', 'friends'])
-  },
-  created() {
-    this.getData()
-  },
-  methods: {
-    async getData() {
-      this.loading = true
-      await this.$sleep(500)
-      this.loading = false
+defineOptions({
+  name: 'Fans'
+})
+const baseStore = useBaseStore()
+const data = reactive({
+  loading: false,
+  loadingMore: false,
+  recommend: [],
+  fans: [],
+})
 
-      this.recommend = this.$clone(this.friends.all)
-      this.fans = this.$clone(this.friends.all)
-      this.recommend.map(v => {
-        v.type = -1
-      })
-    },
-    async loadData() {
-      if (this.loadingMore) return
-      this.loadingMore = true
-      await this.$sleep(500)
-      this.loadingMore = false
-      let temp = this.$clone(this.friends.all)
-      temp.map(v => {
-        v.type = -1
-      })
-      this.recommend = this.recommend.concat(temp)
-    }
-  }
+async function getData() {
+  data.loading = true
+  await _sleep(500)
+  data.loading = false
+
+  data.recommend = cloneDeep(baseStore.friends.all)
+  data.fans = cloneDeep(baseStore.friends.all)
+  data.recommend.map(v => {
+    v.type = -1
+  })
 }
+
+async function loadData() {
+  if (data.loadingMore) return
+  data.loadingMore = true
+  await _sleep(500)
+  data.loadingMore = false
+  let temp = cloneDeep(baseStore.friends.all)
+  temp.map(v => {
+    v.type = -1
+  })
+  data.recommend = data.recommend.concat(temp)
+}
+
+onMounted(getData)
 </script>
 
 <style scoped lang="less">
 
 
-
 .list-complete-enter-from,
 .list-complete-leave-to {
   opacity: 0;
@@ -105,7 +91,7 @@ export default {
   font-size: 14rem;
 
   .content {
-    padding: var(--page-padding);
+    padding: 0 var(--page-padding);
     padding-top: var(--common-header-height);
 
     .scroll {

src/pages/message/Message.vue

@@ -3,8 +3,8 @@
     <div class="no-search" v-show="!searching">
       <header>
         <Icon @click="createChatDialog = true" icon="formkit:add"/>
-        <Icon icon="tabler:camera-selfie" />
-        <Icon  @click="searching = true" icon="tabler:search"/>
+        <Icon icon="tabler:camera-selfie"/>
+        <Icon @click="searching = true" icon="tabler:search"/>
       </header>
 
       <Scroll ref="mainScroll">
@@ -403,12 +403,13 @@ import Footer from '../../components/Footer.vue'
 import Search from "../../components/Search";
 import FromBottomDialog from '../../components/dialog/FromBottomDialog'
 import Check from "../../components/Check";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import Peoples from "../people/components/Peoples";
 import Mask from "../../components/Mask";
 import Scroll from "../../components/Scroll";
 import People from "../people/components/People";
 import BasePage from "../BasePage";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   extends: BasePage,
@@ -436,12 +437,11 @@ export default {
       text: 'AAAAAAAAA、BBBBBBBBBBBBB、CCCCCCCC',
       searchFriends: [],
       recommend: [],
-
       moreChat: []
     }
   },
   computed: {
-    ...mapState(['friends', 'userinfo']),
+    ...mapState(useBaseStore, ['friends', 'userinfo']),
     selectFriends() {
       return this.friends.all.filter(v => v.select).length
     },

src/pages/message/MoreSearch.vue

@@ -17,8 +17,9 @@
 </template>
 <script>
 import Search from "../../components/Search";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import People from "../people/components/People";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "MoreSearch",
@@ -32,7 +33,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['friends', 'userinfo']),
+    ...mapState(useBaseStore, ['friends', 'userinfo']),
     searchFriendsAll() {
       return this.friends.all.filter(v => {
         return v.name.search(this.searchKey) !== -1 || v.account.search(this.searchKey) !== -1

src/pages/message/RedPacketDetail.vue

@@ -7,7 +7,7 @@
     </BaseHeader>
     <div class="content">
       <div class="wrapper">
-        <img :src="$imgPreview(userinfo.avatar)" alt="" class="avatar">
+        <img :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="avatar">
         <span class="belong">{{ userinfo.nickname }}的红包</span>
         <div class="password">大吉大利</div>
         <span class="money">0.01元</span>
@@ -19,7 +19,9 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
+import {_checkImgUrl} from "@/utils";
 
 export default {
   name: "RedPacketDetail",
@@ -31,12 +33,12 @@ export default {
     return {}
   },
   computed: {
-    ...mapState(['userinfo'])
+    ...mapState(useBaseStore, ['userinfo']),
   },
   watch: {},
   created() {
   },
-  methods: {}
+  methods: {_checkImgUrl}
 }
 </script>
 

src/pages/message/SetRemark.vue

@@ -24,8 +24,6 @@
 
 <script>
 
-import {mapState} from "vuex";
-
 export default {
   name: "SetRemark",
   data() {

src/pages/message/Visitors.vue

@@ -20,7 +20,7 @@
           <div class="header">
             <div class="wrapper">
               <img src="../../assets/img/icon/message/display2.webp" alt="" class="icon1">
-              <img :src="$imgPreview(userinfo.avatar)" alt="" class="icon2">
+              <img :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="icon2">
               <img src="../../assets/img/icon/message/display1.webp" alt="" class="icon3">
             </div>
           </div>
@@ -72,12 +72,14 @@
   </div>
 </template>
 <script>
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import Peoples from "../people/components/Peoples";
 import NoMore from "../../components/NoMore";
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
 import Switches from "./components/swtich/switches";
 import BaseButton from "../../components/BaseButton";
+import {useBaseStore} from "@/store/pinia";
+import {_checkImgUrl} from "@/utils";
 
 export default {
   name: "visitors",
@@ -104,12 +106,13 @@ export default {
     }
   },
   computed: {
-    ...mapState(['userinfo', 'friends']),
+    ...mapState(useBaseStore, ['friends', 'userinfo']),
   },
   created() {
     this.recommend = this.$clone(this.friends.all)
   },
   methods: {
+    _checkImgUrl,
     keepClose() {
       this.$notice('你将不会再收到相关通知')
       this.$back()

src/pages/message/chat/Chat.vue

@@ -131,7 +131,7 @@
             <img src="../../../assets/img/icon/message/chat/bg-close.png" alt="" class="bg">
             <div class="wrapper">
               <div class="top">
-                <img :src="$imgPreview(userinfo.avatar)" alt="" class="avatar">
+                <img :src="_checkImgUrl(userinfo.cover_url[0].url_list[0])" alt="" class="avatar">
                 <div class="belong">{{ userinfo.nickname }}的红包</div>
                 <div class="password">大吉大利</div>
               </div>
@@ -158,8 +158,10 @@
 import ChatMessage from "../components/ChatMessage";
 import {inject, nextTick} from "vue";
 import Mask from "../../../components/Mask";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
 import Loading from "../../../components/Loading";
+import {useBaseStore} from "@/store/pinia";
+import {_checkImgUrl} from "@/utils";
 
 let CALL_STATE = {
   REJECT: 0,
@@ -459,7 +461,7 @@ export default {
     isTyping() {
       return this.typing || this.isExpand
     },
-    ...mapState(['userinfo'])
+    ...mapState(useBaseStore, ['userinfo']),
   },
   created() {
   },
@@ -467,6 +469,7 @@ export default {
     this.scrollBottom()
   },
   methods: {
+    _checkImgUrl,
     scrollBottom() {
       nextTick(() => {
         let wrapper = this.$refs.msgWrapper

src/pages/message/components/ChatMessage.vue

@@ -96,7 +96,8 @@
 </template>
 <script>
 
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
 
 let CALL_STATE = {
   REJECT: 0,
@@ -150,9 +151,7 @@ export default {
     }
   },
   computed: {
-    ...mapState({
-      userinfo: 'userinfo',
-    }),
+    ...mapState(useBaseStore, ['userinfo']),
     isMe() {
       return this.userinfo.id === this.message.user.id
     }

src/pages/people/FindAcquaintance.vue

@@ -133,7 +133,8 @@ import People from './components/People'
 import Search from '../../components/Search'
 import Indicator from '../../components/slide/Indicator'
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "FindAcquaintance",
@@ -182,7 +183,7 @@ export default {
         this.findAddressListDialog = this.outWebImgAccountDialog = false
       }
     },
-    ...mapState(['friends'])
+    ...mapState(useBaseStore, ['friends']),
   },
   mounted() {
   },

src/pages/people/FollowAndFans.vue

@@ -51,7 +51,8 @@ import People from './components/People'
 import Search from '../../components/Search'
 import Indicator from '../../components/slide/Indicator'
 import FromBottomDialog from "../../components/dialog/FromBottomDialog";
-import {mapState} from "vuex";
+import {mapState} from "pinia";
+import {useBaseStore} from "@/store/pinia";
 
 export default {
   name: "FindAcquaintance",
@@ -71,7 +72,7 @@ export default {
     }
   },
   computed: {
-    ...mapState(['userinfo', 'friends'])
+    ...mapState(useBaseStore, ['friends', 'userinfo']),
   },
   watch: {
     searchKey(newVal) {

src/router/index.js

@@ -1,6 +1,6 @@
 import * as VueRouter from "vue-router";
-import store from "../store";
 import routes from "./routes";
+import {useBaseStore} from "@/store/pinia";
 
 const router = VueRouter.createRouter({
   history: VueRouter.createWebHashHistory(),
@@ -15,8 +15,9 @@ const router = VueRouter.createRouter({
   },
 })
 router.beforeEach((to, from) => {
+  const baseStore = useBaseStore()
   //footer下面的5个按钮，对跳不要用动画
-  let noAnimation = ['/', '/home', '/me', '/attention', '/message', '/publish', '/home/live']
+  let noAnimation = ['/', '/home', '/me', '/shop', '/message', '/publish', '/home/live']
   if (noAnimation.indexOf(from.path) !== -1 && noAnimation.indexOf(to.path) !== -1) {
     return true
   }
@@ -28,7 +29,8 @@ router.beforeEach((to, from) => {
   if (toDepth > fromDepth) {
     if (to.matched && to.matched.length) {
       let toComponentName = to.matched[0].components.default.name
-      store.commit('updateExcludeRoutes', {type: 'remove', value: toComponentName})
+      // store.commit('updateExcludeRoutes', {type: 'remove', value: toComponentName})
+      baseStore.updateExcludeRoutes({type: 'remove', value: toComponentName})
       // console.log('to', toComponentName)
       // console.log('前进')
       // console.log('删除', toComponentName)
@@ -37,7 +39,9 @@ router.beforeEach((to, from) => {
   } else {
     if (from.matched && from.matched.length) {
       let fromComponentName = from.matched[0].components.default.name
-      store.commit('updateExcludeRoutes', {type: 'add', value: fromComponentName})
+      // store.commit('updateExcludeRoutes', {type: 'add', value: fromComponentName})
+      baseStore.updateExcludeRoutes({type: 'add', value: fromComponentName})
+
       // console.log('后退')
       // console.log('添加', fromComponentName)
     }

src/store/index.js

@@ -1,90 +0,0 @@
-import * as Vuex from "vuex";
-import enums from '../utils/enums'
-import CONST_VAR from "../utils/const_var";
-import resource from "../assets/data/resource";
-import {friends} from "@/api/user";
-
-const store = Vuex.createStore({
-  state: {
-    bodyHeight: document.body.clientHeight,
-    bodyWidth: document.body.clientWidth,
-    maskDialog: false,
-    maskDialogMode: 'dark',
-    version: '17.1.0',
-    userinfo: {
-      school: {
-        name: '中央戏剧学院',
-        department: null,
-        joinTime: null,
-        education: null,
-        displayType: enums.DISPLAY_TYPE.ALL,
-      },
-      "id": "93864497380",
-      "unique_id_modify_time": "1630393144",
-      "unique_id": "10040050",
-      "favoriting_count": 143,
-      "avatar": new URL('../assets/img/icon/avatar/2.png', import.meta.url).href,
-      "city": "成都",
-      "province": '四川',
-      "country": "中国",
-      "birthday": "2002-01-01",
-      "cover": "https://p3.douyinpic.com/obj/c8510002be9a3a61aad2?from=116350172",
-      "following_count": 66,
-      "follower_count": 235000,
-      "aweme_count": 1796000,
-      "nickname": "我是小睿耶",
-      "phone": "",
-      "sex": "",
-      "last_login_time": "1630423555",
-      "create_time": "1630423555",
-      "status": 1,
-      "desc": `一个普普通通学表演的\n看到的人都能开开心心~~~~~~~~~~~~~`,
-      "is_private": 1
-    },
-    friends: resource.users,
-    excludeRoutes: [],
-    judgeValue: 20,
-    homeRefresh: 60,
-    loading: false,
-  },
-  mutations: {
-    setLoading(store, val) {
-      store.loading = val
-    },
-    setUserinfo(store, val) {
-      store.userinfo = val
-    },
-    setFriends(store, val) {
-      store.friends = val
-    },
-    setMaskDialog(store, val) {
-      store.maskDialog = val.state
-      if (val.mode) {
-        store.maskDialogMode = val.mode
-      }
-    },
-    updateExcludeRoutes(store, val) {
-      if (val.type === 'add') {
-        if (!store.excludeRoutes.find(v => v === val.value)) {
-          store.excludeRoutes.push(val.value)
-        }
-      } else {
-        let resIndex = store.excludeRoutes.findIndex(v => v === val.value)
-        if (resIndex !== -1) {
-          store.excludeRoutes.splice(resIndex, 1)
-        }
-      }
-      // console.log('store.excludeRoutes', store.excludeRoutes,val)
-    },
-  },
-  actions: {
-    async getFriends(context) {
-      let res = await friends()
-      if (res.code === CONST_VAR.SUCCESS) {
-        context.commit('setFriends', res.data)
-      }
-    }
-  }
-})
-
-export default store

src/store/pinia.js

@@ -1,10 +1,20 @@
 import {defineStore} from "pinia";
 import {friends, userinfo} from "@/api/user.js";
 import enums from "@/utils/enums";
+import resource from "@/assets/data/resource";
 
 export const useBaseStore = defineStore('base', {
   state: () => {
     return {
+      bodyHeight: document.body.clientHeight,
+      bodyWidth: document.body.clientWidth,
+      maskDialog: false,
+      maskDialogMode: 'dark',
+      version: '17.1.0',
+      excludeRoutes: [],
+      judgeValue: 20,
+      homeRefresh: 60,
+      loading: false,
       routeData: null,
       users: [],
       userinfo: {
@@ -27,7 +37,8 @@ export const useBaseStore = defineStore('base', {
         "white_cover_url": [{
           "url_list": [],
         }],
-      }
+      },
+      friends: resource.users,
     }
   },
   getters: {},
@@ -41,6 +52,28 @@ export const useBaseStore = defineStore('base', {
       if (r2.success) {
         this.users = r2.data
       }
-    }
+    },
+    setUserinfo(val) {
+      this.userinfo = val
+    },
+    setMaskDialog(val) {
+      this.maskDialog = val.state
+      if (val.mode) {
+        this.maskDialogMode = val.mode
+      }
+    },
+    updateExcludeRoutes(val) {
+      if (val.type === 'add') {
+        if (!this.excludeRoutes.find(v => v === val.value)) {
+          this.excludeRoutes.push(val.value)
+        }
+      } else {
+        let resIndex = this.excludeRoutes.findIndex(v => v === val.value)
+        if (resIndex !== -1) {
+          this.excludeRoutes.splice(resIndex, 1)
+        }
+      }
+      // console.log('store.excludeRoutes', store.excludeRoutes,val)
+    },
   },
 })

src/utils/index.jsx

@@ -466,6 +466,12 @@ export function _getUserDouyinId(item) {
   return item.author.unique_id || item.author.short_id
 }
 
+export function _sleep(duration) {
+  return new Promise((resolve, reject) => {
+    setTimeout(resolve, duration)
+  })
+}
+
 export function cloneDeep(val) {
   return JSON.parse(JSON.stringify(val))
 }

src/utils/request.js

@@ -1,6 +1,5 @@
 import axios from 'axios'
 import config from '@/config'
-import store from '../store'
 import globalMethods from './index'
 
 const axiosInstance = axios.create({