uni-app中实现主题切换功能

alpha_xiao

已于 2023-02-07 18:53:21 修改

阅读量2.5k

点赞数

分类专栏： Vue 文章标签： uni-app vue.js 前端

于 2023-02-07 18:51:27 首次发布

本文链接：https://blog.csdn.net/alpha_xiao/article/details/128924006

版权

Vue 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

该文介绍了如何在uni-app框架中利用vuex进行状态管理，实现应用的主题切换功能。通过创建vuexstore，定义state和mutations，然后在组件中触发mutations改变主题，最后在根组件中根据vuex状态更新样式来达到切换效果。

摘要由CSDN通过智能技术生成

在uni-app中实现主题切换功能，可以使用vuex状态管理，具体实现如下：

安装vuex插件：

npm install vuex

创建vuex的store：

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    theme: 'light'
  },
  mutations: {
    changeTheme(state, theme) {
      state.theme = theme
    }
  }
})

export default store

在main.js中注册store：

import store from './store'

new Vue({
  store,
  ...
})

在需要切换主题的组件中触发vuex的mutation：

<template>
  <view class="container">
    <button @click="changeTheme('light')">切换到浅色主题</button>
    <button @click="changeTheme('dark')">切换到深色主题</button>
  </view>
</template>

<script>
export default {
  methods: {
    changeTheme(theme) {
      this.$store.commit('changeTheme', theme)
    }
  }
}
</script>

在根组件app.vue中根据vuex的状态更新主题样式：

<template>
  <view
    class="container"
    :class="{
      'light-theme': theme === 'light',
      'dark-theme': theme === 'dark'
    }"
  >
    <router-view />
  </view>
</template>

<script>
export default {
  computed: {
    theme() {
      return this.$store.state.theme
    }
  }
}
</script>

<style>
.light-theme {
  background-color: #fff;
  color: #333;
}

.dark-theme {
  background-color: #333;
  color: #fff;
}
</style>