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

admin

  H9 b* S7 b8 r9 A 创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
7 T; W3 G  s$ Qimport { ref } from 'vue'
; L0 `( ?7 t/ ?& c3 j0 [
export const useDeviceStore = defineStore('device', () => {
: E3 v+ r. g% [' z' D+ n3 f  const isMobile = ref(false)
  let mediaQuery: MediaQueryList | null = null
4 |( H; k9 |# p6 m; W# d
6 L+ d$ f3 y- U5 b  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
; |% L- k" ]$ h, u# g) z6 p! l/ _9 n    isMobile.value = e.matches
  }
: E* ?/ `2 p* ]6 A/ D
1 z/ a- a1 V7 [0 @* @  //

admin

创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
import { ref } from 'vue'

export const useDeviceStore = defineStore('device', () => {
# Y5 g2 F( Y  q- a) v( [  const isMobile = ref(false)
  let mediaQuery: MediaQueryList | null = null

  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
    isMobile.value = e.matches
+ S0 a9 K# p1 O6 l' ?( j  }
, m4 P9 G4 ]( B  I9 Q3 {
, q1 t0 I* f) [$ l  //

admin

创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
/ S2 {- ]7 m  _% himport { ref } from 'vue'
( _) q, W- `. D" Y
export const useDeviceStore = defineStore('device', () => {
; K7 G1 C( O! H2 U8 F/ G  const isMobile = ref(false)
  let mediaQuery: MediaQueryList | null = null
8 R7 y6 r) W. y( `& a* p" q5 X  ]
. k1 x' K6 ]  x3 K% t  A  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
: V0 g# N7 |1 _9 t3 y' R3 k    isMobile.value = e.matches
  }

  //

admin

创建 Pinia 全局 Store新建文件 src/stores/device.ts。我们把设备监听逻辑直接写在 Store 内部。typescriptimport { defineStore } from 'pinia'
6 x5 ]! j2 S8 timport { ref } from 'vue'
3 W! y2 k/ n4 W/ Y, s' ^
export const useDeviceStore = defineStore('device', () => {
/ s8 T) G  ?5 q8 \  const isMobile = ref(false)
3 d$ L4 c* {* O8 U4 p  let mediaQuery: MediaQueryList | null = null

; p; X+ S& j+ z  const updateDevice = (e: MediaQueryListEvent | MediaQueryList) => {
7 V5 y7 h5 P% \( n- r    isMobile.value = e.matches
* W0 o9 T9 \$ r, \  }

& v% e6 s/ b) X# F% L5 _2 D- N  //