当前位置: 代码迷 >> 综合 >> 今日总结 less全局变量 + vuex +secct+sessionStorage +localStorage +watch 监测 vuex
  详细解决方案

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

热度:3   发布时间:2023-12-25 02:21:45.0
//在此之前先安装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("权限编辑")}}}