Pinia 全局状态，对于后期的其他组件文件处理方法

admin

创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
; q+ t5 e1 {8 B3 Aimport { ref } from 'vue'
# X% l% _$ s7 H/ d4 z; c
export const useDeviceStore = defineStore('device', () => {
$ X- @! Q1 i8 {- e  Q* q% l0 }  const isMobile = ref(false)
# }+ w/ q7 ~' K  let mediaQuery: MediaQueryList | null = null
  u3 j9 f) s4 U4 \: {, X6 E" @
& B* A0 h- [( H# \$ H9 F+ h  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
# P3 w7 c: ^) m    isMobile.value = e.matches
8 Z/ f9 ~% K" j! K/ _- I. p  }
1 S; h5 X0 }9 Q' q; ?
( Q/ f3 Q% A. u" E; l  //

admin

创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
7 ]: a! G$ a: F# w$ Uimport { ref } from 'vue'

export const useDeviceStore = defineStore('device', () => {
  const isMobile = ref(false)
. P8 y- \( p+ }7 _  let mediaQuery: MediaQueryList | null = null
$ ~" u3 @' E- J/ s
  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
    isMobile.value = e.matches
! C2 x7 n# H+ {7 y+ S5 I+ J+ T' V8 ?  }

; r3 X. `/ C+ G, Z* z7 ?: G  //

admin

创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
import { ref } from 'vue'
) W/ ]% m" T! |, L+ K6 C6 t  I
* }' `0 Y7 V9 X5 l$ bexport const useDeviceStore = defineStore('device', () => {
1 s& |4 M2 E4 `$ v; z  const isMobile = ref(false)
  let mediaQuery: MediaQueryList | null = null

3 D7 n' E4 r9 c  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
    isMobile.value = e.matches
  }

8 O) S5 D- u8 K; T* U' _  //

admin

创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
9 _8 ~& \6 O+ j' O+ R0 ximport { ref } from 'vue'

7 T0 P) R$ m0 b6 @% ^export const useDeviceStore = defineStore('device', () => {
) h/ i! }1 e# ?1 z& E0 x  const isMobile = ref(false)
  let mediaQuery: MediaQueryList | null = null

  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
. g$ i# ?0 r9 u1 g- y" K    isMobile.value = e.matches
  }

  //