vue(三）vue3 + vite + pinia 全局变量

全局变量记录两种方式,一种原生，一种pinia 全局状态管理

版本:

"dependencies": {

    "element-plus": "^2.2.17",

    "pinia": "^2.0.22",

    "vue": "^3.2.39",

    "vue-router": "^4.1.5"

  },

  "devDependencies": {

    "@vitejs/plugin-vue": "^3.1.0",

    "fast-glob": "^3.2.12",

    "vite": "^3.1.0",

    "vite-plugin-svg-icons": "^2.0.1"

  }

如下图 

安装

npm install pinia

全局注册

import { createPinia } from 'pinia'


app.use(createPinia())

获取当前是否为小屏幕设备

import { defineStore } from 'pinia'

export const useSystemInfoStore = defineStore({
    /** id 是必填的，并且所有 Store 中唯一。因为Pinia会将它在devtools显示 */
    id: 'systemInfoStore',
    state: () => ({
        mobile: false,
        screenWidth: document.body.clientWidth
    }),
    /** computed 修饰一些值 */
    getters: {
        /** 获取当前是否为小设备 */
        isSmallDevice: (state) => {
            if (state.mobile || state.screenWidth < 768) return true
            return false
        }
    },
    /** methods 可以做同步 异步都可以 提交state */
    actions: {
        modifyDevice() {
            const moblie = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
            this.mobile = moblie ? true : false
            this.screenWidth = document.body.clientWidth
        }
    }
})

更改全局变量

其他页面使用

其他全局变量的方法:

// 基本逻辑如下
// main.js
app.config.globalProperties.msg = 'hello'

/** 子页面使用 */
import { getCurrentInstance } from "vue"
console.log( getCurrentInstance()?.appContext.config.globalProperties)