VUE主题切换

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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

　　

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14

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

　　定义css

?

1 2 3 4 5 6

@import "./theme-red.scss"; @import "./theme-blue.scss";   .text-color{   color: var(--text-color); }

　　//主题定义

?

1 2 3 4 5

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