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