vue Pinia 全局主题切换

---

vue Pinia 全局主题切换

目的 : 实现单页面上切换主题,例如 关灯或开灯;

环境: vue3.0 + vite + Pinia

基本环境

// tsconfig.json 文件中 新增路径配置 导入自定义文件时可以之间@导入
{
  "compilerOptions": {
	"baseUrl": "./",
    "paths": {
      "@/*":["src/*"]
    }
  },
}

// main.ts
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
import router from '@/router/router'


// 创建app为vue实例根组件或全局组件;
const app = createApp(App)
// vue实例添加router组件
app.use(router)
// vue实例添加pinia组件
app.use(createPinia())
// vue实例挂载到index.html页面
app.mount('#app')

// app.vue

默认路由router加载 /路径,所以新建了一个index.vue用来组装页面;

// ViewHead.vue 页面 头部组件,导入到index.vue中

Pinia Store 组件的使用,用来缓存主题的全局状态

import {darkTheme,lightTheme} from 'naive-ui'
import { defineStore } from 'pinia'
import { ref, watch} from 'vue'
import type {GlobalTheme} from 'naive-ui'

// themeStore of pinia
export const useThemeStore = defineStore('themeStore',()=>{
    // theme ref var
    const theme = ref(lightTheme)
    // actions: update Theme 
    function setTheme(themes:boolean){
        if(themes){
            // true lightTheme
            theme.value  = lightTheme
        }else{
            // false darkTheme
            theme.value  = darkTheme
        }
    }

    return {
        theme,
        setTheme
    }
})

目录结构

src
├─api
├─assets
├─components
├─router
├─store
	├─theme.ts
├─view
	├─fixedcomponent
		├─ViewHead.vue
	├─index.vue
App.vue
main.ts

结果展示

过程解析

因为使用了NaiveUI所以就使用了其支持的全局化配置Config Provider 即: App.vue 中的标签 ,包裹整个页面的渲染出口;

因为触发切换的组件在ViewHead.vue子组件内所以需要使用 Pinia store theme.ts来存储全局的主题状态变化和主题变更的触发;

在ViewHead.vue中使用 n-button 按钮即可 通过 useThemeStore()中的setTheme()方法修改其theme的状态属性, 进而改变n-config-provider 标签的:theme属性

实现初次加载页面时根据系统的主题来修改页面的theme主题状态, 在ViewHead.vue中通过watch监听useOsTheme()即可实现;