vue实战-换皮肤2（使用less实现）

在上一节中我们通过动态切换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()方法直接刷新页面，这也是这个换皮肤的方法的最大的不足之处了，如果有更好的思路的话欢迎指正~