VUE主题切换

Vue.use(Vuex)
const store = new Vuex.Store({
	state: {
			"theme": "theme-red",
	},		
	mutations: {
		setTheme(state, theme) {
			state.theme = theme
		},
			},
	actions:{
		setTheme: ({
			commit,
			state
		}, theme)=>{
			//获取主题配置信息
			commit("setTheme",res.data.theme)
		}
	}
})
export default store

  

 const themeMixins ={
 computed: {
 	theme() {
 		return this.$store.state.theme
 	}
 },
 methods: {
	 //设置样式
 	setTheme(theme){
 		this.$store.dispatch("setTheme",theme)
 	}
 }
}
 export default themeMixins

  定义css

@import "./theme-red.scss";
@import "./theme-blue.scss";

.text-color{
  color: var(--text-color);
}

  //主题定义

.theme-red {
  
  --text-color:#FFFFFF;

}

  

posted @ 2024-08-21 16:44  羽鱼  阅读(22)  评论(0编辑  收藏  举报