uniapp中vuex+scss变量更换主题色

第一步：vuex中创建store文件目录index.js文件

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
	state: {
		// 写上默认皮肤的数据
		skin: '#6aa6ff'
	},
	//计算属性state的值改变过后的值更新
	getters: {
		skin: state => state.skin
	},
	mutations: {
		// 皮肤更换
		setSKIN(state, data) {
			if (data) {
			//防止vuex刷新丢失，存入到本地
				uni.setStorageSync('skin_key', data);
				state.skin = data;
			} 

		}
	}
})

第二步 创建一个 mixin 文件 因为每个页面都是用 mapGetters 方式获取值

import {mapGetters} from 'vuex'
export default {
	install(Vue) {
		Vue.mixin({
			computed: {
				...mapGetters(['skin'])
			}
		})
	}
}

第三步直接在main.js 中引入

//引入自行更换路径
import store from '@/store/index.js'
//每个页面引入换肤的计算属性
import mixin from '@/store/mixin .js'
Vue.use(mixin)
const app = new Vue({
	store,
	...App
})

第四步页面使用 因为在main.js 中引入了公共的 mapGetters 所以在页面就不用单独引用了

在最外层的div中加入 :style="{'--skin':skin}"
//在使用颜色变量的地方使用
	.text {
		color:var(--skin);
	}

第五步在切换颜色页面的方法

    	<!-- 切换皮肤的颜色 -->
			<view class="card">
				<view class="titleText">请选择皮肤风格</view>
				<radio-group @change="radioChange" name="current" class="radioStyle">
					<label class="h-flex-x list-item" v-for="(item, index) in items" :key="index">
						<view>
							<radio :value="item.id"  :checked="item.id=== current" />
						</view>
						<view>{{item.name}}</view>
					</label>
				</radio-group>
			</view>

           data(){
             return{
             items: [{
				 	 id:'0',
				 	 name:'默认',
				 	 setColor:'#6aa6ff',
				 	checked:true
				 },
				 {
				 	 id:'1',
				 	 name:'红色',
				 	 setColor:'#c02c38'
				 },
				{
					 id:'2',
					 name:'绿色',
					 setColor:'#1dbfab'
				}],
				current:'0'
             }
},
 // 选中的radio赋值
	onReady() {
			this.current=uni.getStorageSync('radio_key')?uni.getStorageSync('radio_key'):'0';
		},
   methods:{
     radioChange(e) {
				this.current = e.detail.value;
				var skinItem = this.items[this.current].setColor;
				uni.setStorageSync('radio_key',this.current);
				this.$store.commit("setSKIN", skinItem);
			},
}
				

第六步，因为们每次进来app都是上次选中的颜色，所以在app.vue 文件中增加

created() {
			this.$store.commit('setSKIN',uni.getStorageSync('skin_key'))
		}

最后差不多功能就做完了，有不足的地方请多多指教
借鉴博客地址：https://zhuanlan.zhihu.com/p/635051054