文章目录

• • • 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 varconst theme = ref(lightTheme)// actions: update Theme function setTheme(themes:boolean){if(themes){// true lightThemetheme.value  = lightTheme}else{// false darkThemetheme.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()即可实现;