device.js 880 B

123456789101112131415161718192021222324252627282930313233
  1. import { defineStore } from 'pinia'
  2. import { getDeviceMode, setDeviceMode } from '@/utils/device'
  3. /**
  4. * 全局设备端 store:
  5. * - pc :PC 端展示
  6. * - mobile:移动端展示(窄屏自适应)
  7. */
  8. export const useDeviceStore = defineStore('device', {
  9. state: () => ({
  10. mode: getDeviceMode(),
  11. isMobile: getDeviceMode() === 'mobile',
  12. }),
  13. actions: {
  14. switchTo(mode) {
  15. setDeviceMode(mode)
  16. this.mode = mode
  17. this.isMobile = mode === 'mobile'
  18. },
  19. },
  20. })
  21. // 监听 utils/device.js 派发的全局事件,确保 store 与工具层手动覆盖值始终一致
  22. if (typeof window !== 'undefined') {
  23. window.addEventListener('mf-device-change', (e) => {
  24. const store = useDeviceStore()
  25. const mode = e.detail
  26. if (mode === 'pc' || mode === 'mobile') {
  27. store.mode = mode
  28. store.isMobile = mode === 'mobile'
  29. }
  30. })
  31. }