今日总结 less全局变量 + vuex +secct+sessionStorage +localStorage +watch 监测 vuex

//在此之前先安装less 就不说了
npm install sass-resources-loader --save-dev  //下载

然后在build 的utils.js中exports.cssLoaders = function (options) {}中加上一下代码：
path.resolve   //改为自己的代码目录

 function lessResourceLoader() {
        var loaders = [
            cssLoader,
            'less-loader',
            {
                loader: 'sass-resources-loader',
                options: {
                    resources: [
                        path.resolve(__dirname, '../src/assets/styles/common.less'),
                    ]
                }
                        }
        ];
        if (options.extract) {
            return ExtractTextPlugin.extract({
                use: loaders,
                fallback: 'vue-style-loader'
            })
        } else {
            return ['vue-style-loader'].concat(loaders)
        }
    }

然后后面将 return{} 块中的 less: generateLoaders('less') 替换成上面自定义的函数 less: lessResourceLoader()   //就行了

//之前用过less 但是用的都是小部分功能，少点命名而已 这次用了全局变量还是要记下的 less不能直接通用要用sass的方法

npm install vuex --save  //安装vuex
//main.js中写入
import Vuex from 'vuex'
Vue.use(Vuex)


在src 下创建文件夹store；创建store.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default new Vuex.Store({
  state:{
    count:0
  },
  mutations:{
    increment:state => state.count ++,
    decrement:state => state.count --,
    increment2 (state, n) {
      state.count += n;
    },
    increment3 (state, payload) {
      state.count += payload.price + payload.count;
    }
  }
})


//然后再在main.js中引入文件与store
import store from './store/store'

new Vue({
  el: '#app',
  store,
  router,
  template: '<App/>',
  components: { App }
})  

//然后就可以使用啦
template>
  <div class="hello">
    <div>
      {{ count }}
      <p>
        <button @click="increment">直接改变值</button>
        <button @click="decrement">触发vuex事件</button>
        <button @click="decrement2">触发vuex传值事件</button>
        <button @click="decrement3">触发vuex传入对象事件</button>
        <input v-model="message" placeholder="edit me">
      </p>

    </div>
  </div>
</template>

<script>
  export default{
    name:'sildebar',
    data(){
      return{
        message:10,
      }
    },
    methods:{
      increment(){    //直接改变值
        this.$store.state.count = 111
      },
      decrement(){      //触发vuex事件
        this.$store.commit('decrement')
      },
      decrement2(){      //出发传值事件
        console.log(typeof this.message)
        this.$store.commit('increment2', this.message);
      },
      decrement3(){     //触发传入对象事件
        this.$store.commit({
          type: 'increment3',
          price: 10,
          count: 8
        })
      }

    },
    computed:{
      count(){
        return this.$store.state.count
      },
    }


  }

</script> 

vuex 使用链接  https://www.cnblogs.com/songrimin/p/7815850.html    vuex 详解

less全局变量  http://www.cnblogs.com/lcosima/p/9556372.html

 window.AccessToken = JSON.parse(sessionStorage.getItem("AccessToken")); //获取请求头
sessionStorage.setItem('AccessToken',JSON.stringify(response.data.Data.AccessToken));   //使用set方法放入请求头 不然会消失的  键值对格式

 window.AccessToken = JSON.parse(localStorage.getItem("AccessToken")); //获取请求头
 localStorage.setItem('AccessToken',JSON.stringify(response.data.Data.AccessToken));   
 //使用set方法放入请求头 不然会消失的  键值对格式

    computed: {
    listenshowpage1() {
      //进行监测，因为他不会自动更新
      console.log("权限id改变啦");
      console.log(this.$store.state.prowerId);
      return this.$store.state.prowerId; //检测vuex属性计算
    }
  },
  watch: {
    listenshowpage1: function(a, b) {  //进行检测 如果从子菜单变为添加顶级菜单就赋值为空
        if(a==""){
            console.log("菜单添加权限");
        }else {
            console.log("权限编辑")
        }
    }
  }