在上一节中我们通过动态切换html中css的引用路径实现了vue中的换皮肤功能。但是这种方法有一个缺陷，那就是只能用css的语法来实现。这个缺陷在某些变态的需求下会增加我们很多工作量，因此本节中将介绍vue中另一种换皮肤的实现思路，用less语法实现换肤。
上节中讲过，想要达到换皮肤的目的无非就是替换掉样式文件，而一般项目中使用less都会在style标签中import样式文件。但是现在我们想要达到动态加载样式文件的效果，因此就不能使用import了，而需要使用另一种引入样式文件的方法require。也就是说在每一个想要根据所选皮肤更改样式的页面都使用require来动态加载样式文件。
- 在项目的main.js中的methods下新增_getLess方法用来根据当前所选皮肤获取样式文件，但是需要使用到mixin：
Vue.mixin({
computed: {
...mapGetters([
'templates'
]),
},
created() {
var theme = localStorage.theme;
if(theme) {
this.templatesMu(theme);
}
},
methods: {
...mapMutations([
'templatesMu'
]),
_getLess(filepath, filename) {
console.log(this.templates)
return require("./../static/template/" + this.templates + "/" + filepath + "/" + filename + "/index.less");
},
},
})
因为用到了vuex，所以还需要import进来：
import { mapState, mapGetters, mapMutations } from 'vuex'
_getLess方法传入两个用来标识样式文件位置的参数，调用该方法会动态的require一个样式文件。this.theme为store中存储的当前皮肤的信息，我们在选择皮肤时会将这个信息存储下来。并且我们要将皮肤相关的样式文件存储在_getLess方法对应的文件夹下。
在vuex中加入方法用于存储当前皮肤信息：
export default {
state: {
templates: "2",
},
getters: {
templates(state) {
return state.templates;
}
},
mutations: {
templatesMu(state, val) {
if (val) {
state.templates = val;
}
},
},
actions: {
}
}
- 在具体的页面中的created方法中调用_getLess方法：
created: () {
this._getLess("home","test1");
},
两个标识路径的参数方便程序的扩展。
这样当程序加载这个页面时会首先调用created方法，然后动态加载less样式文件。
- 然后依旧是那个换皮肤的组件，我们将换皮肤的方法改造一下：
// 存储当前皮肤的信息
setTheme(themeFile) {
localStorage.theme = themeFile.data;
this.$store.commit('templatesMu', themeFile.data);
this.show = false;
location.reload();
}
这样就实现了用less语法来完成换皮肤功能。可以看到换皮肤之后调用了location.reload()方法直接刷新页面，这也是这个换皮肤的方法的最大的不足之处了，如果有更好的思路的话欢迎指正~
