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;
}

浙公网安备 33010602011771号