vuePinia全局主题切换

vue Pinia 全局主题切换

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

环境: vue3.0 &＃43; vite &＃43; Pinia

基本环境

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


// main.ts
import { createApp } from &＃39;vue&＃39;
import &＃39;./style.css&＃39;
import App from &＃39;./App.vue&＃39;
import { createPinia } from &＃39;pinia&＃39;
import router from &＃39;&＃64;/router/router&＃39;
// 创建app为vue实例根组件或全局组件;
const app &＃61; createApp(App)
// vue实例添加router组件
app.use(router)
// vue实例添加pinia组件
app.use(createPinia())
// vue实例挂载到index.html页面
app.mount(&＃39;#app&＃39;)
// app.vue




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

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





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

import {darkTheme,lightTheme} from &＃39;naive-ui&＃39;
import { defineStore } from &＃39;pinia&＃39;
import { ref, watch} from &＃39;vue&＃39;
import type {GlobalTheme} from &＃39;naive-ui&＃39;
// themeStore of pinia
export const useThemeStore &＃61; defineStore(&＃39;themeStore&＃39;,()&＃61;>{
// theme ref var
const theme &＃61; ref(lightTheme)
// actions: update Theme
function setTheme(themes:boolean){
if(themes){
// true lightTheme
theme.value &＃61; lightTheme
}else{
// false darkTheme
theme.value &＃61; 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()即可实现;