轻松搞定：UniApp中Vuex+Scss实现主题色切换

2023-03-31 15:10:15

UniApp：使用 Vuex 和 Scss 实现主题色切换

在 UniApp 开发中，提供主题色切换功能非常重要，因为它可以满足用户的个性化需求，提升应用程序的美观性和实用性。本文将详细介绍如何巧妙地结合 Vuex 和 Scss 来轻松实现此功能。

Vuex Store 的搭建

首先，我们需要创建一个 Vuex Store 来管理主题色变量。在 src/store 目录下新建一个 index.js 文件，并添加以下代码：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const state = {
  themeColor: '#3f51b5'
}

const mutations = {
  setThemeColor(state, newColor) {
    state.themeColor = newColor
  }
}

export default new Vuex.Store({
  state,
  mutations
})

引入 Vuex Store

接下来，我们需要在 main.js 中引入 Vuex Store。在 src 目录下打开 main.js 文件，并添加以下代码：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

定义 Scss 主题色变量

现在，我们需要在 Scss 中定义主题色变量。在 src/styles 目录下新建一个 theme.scss 文件，并添加以下代码：

:root {
  --theme-color: #3f51b5;
}

页面使用

最后，我们在页面中就可以使用 Vuex Store 中的主题色变量了。以下是一个简单的示例：

<template>
  <div style="color: var(--theme-color)">
    Hello World!
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters(['themeColor'])
  }
}
</script>