一键换肤

1. 动态修改全局CSS变量

document.documentElement.style.setProperty("css变量（- -xxx的那个）",值);

2. 动态切换多个CSS文件（我的需求）
   修改 上文的.vue

/**
 * el-select@change:切换主题色.scss
 * @method
 * @param   {String}    value       主题色的值  
 */
const changeTheme = (value) => {
  document.getElementById('theme').href = "src/assets/style/"+value+".scss"//切换主题文件
}
onMounted(()=>{
    let link = document.createElement('link');
    link.type = 'text/css';
    link.id = "theme";
    link.rel = 'stylesheet';
    //默认引入css文件这里，我出的错
	link.href = 'src/assets/style/light.scss';//正确，精准地址
	//link.href = '@/assets/style/light.scss';//错误
	//link.href = '../assets/style/light.scss';//错误
    document.getElementsByTagName("head")[0].appendChild(link);  
})

3. 动态切换顶级CSS类名（一个CSS文件）

document.getElementById('app').setAttribute('class', '类名')；
//与window.document.documentElement.setAttribute('变量名', 值);思想类似

解决了上文的 .主题.类名

参考：

http://t.csdn.cn/YIK9w思想
http://t.csdn.cn/X9rH3实现

存储

本来想实现持久化存储，但是vuex得写好多，而且这里有点大材小用了。so简单地来一下子

1. 简单的存储状态有localStorage和sessionStorage。
   前者存在本地，除非clear()，丝了它都在。
   后者存在窗口，意思是你刷新它还在，你把这个页面关了它就不在了。
   我是练习，就用sessionStorage了
   主要就是setItem()和getItem()，一存一取。

//在上面方法二的代码里加：
  //加载状态，否则用light（取）
  let themeColor=sessionStorage.getItem('themeColor')?JSON.parse(sessionStorage.getItem('themeColor')):'light'
  
  /**
   *el-select@change:切换主题色.scss
   *@method
   *@param   {String}    value      主题色的值  
   */
  const changeTheme = value => {
    document.getElementById('theme').href = "src/assets/style/"+value+".scss"//切换主题文件
    sessionStorage.setItem('themeColor',JSON.stringify(value));//存储状态
  }

简单地需求可以了。
2. 如果有监听状态变化的需求，就得麻烦点了
正常这么监听：

//我的需求是：监听字号状态的变化，重绘echart
onMounted(() => {
        //监听字号的状态改变
        window.addEventListener('setItem', () => {
            size = (JSON.parse(sessionStorage.getItem('fontSize')))*2
            option.xAxis.axisLabel.fontSize=14+size*1 
            option.yAxis.axisLabel.fontSize=14+size*1      
            myChart.setOption(option,true);//true重绘
        });
    }) 

然后发现不好使，哎，原因不太清楚，反正网上是这么干的：
不是监听’setItem’嘛，原来的sessionStorage.setItem('fontSize',JSON.stringify(size));//存储状态不好使，得用resetSetItem('fontSize',JSON.stringify(size));//存储状态
这个resetSetItem()是用StorageEvent事件搞的：

	/**
     * 存储字号的状态
     * @method
     * @param    {String}    key       状态键
     * @param    {String}    newVal    状态值
     * @return
     */
    function resetSetItem  (key, newVal) {
        if (key === 'fontSize') {
            // 创建一个StorageEvent事件
            var newStorageEvent = document.createEvent('StorageEvent');
            const storage = {
                setItem: function (k, val) {
                    sessionStorage.setItem(k, val);
                    // 初始化创建的事件
                    newStorageEvent.initStorageEvent('setItem', false, false, k, null, val, null, null);
                    // 派发对象
                    window.dispatchEvent(newStorageEvent)
                }
            }
            return storage.setItem(key, newVal);
        }   
    }

好了