![](https://img-blog.csdnimg.cn/20201014180756724.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
vue
昵称叫铃风的小前端
这个作者很懒,什么都没留下…
展开
-
vuex状态持久化:vuex-persistedstate解决刷新浏览器后vuex状态重置问题
一.问题和原因问题和现象:刷新浏览器后vuex状态重置原因:vuex将数据保存在cache(运行内存)中,内存中的数据是临时数据,刷新浏览器就会释放。类似于js创建一个变量,刷新浏览器变量会销毁,代码重新执行创建的是一个新的变量。二.解决方案解决方案就是使用前端存储,常见的是localstorage/sessionstorage,说到这里大家应该都有思路了,就是前端自己存一份,当vuex获取不到数据时尝试向localstorage/sessionstorage获取。当然,相关的npm包有很多,大多原创 2020-10-30 10:36:28 · 1263 阅读 · 0 评论 -
vue多入口配置——实现公共部分复用
场景:公司基于微信公众号的保险产品有多种,增删频繁。但不同产品间仅仅是page部分不同,其他配置、js等都可复用。若每增加一个产品,就新拉一个git库,独立开发打包,过于繁琐、不易维护。假如需要改变一些公关部分,需要每个库代码单独更改一次。所以科研使用多入口配置,每个产品一个page文件夹,其他assets、static、components等文件夹复用,做好二级即可文件夹分类。参考:http...原创 2019-11-28 11:14:22 · 274 阅读 · 0 评论 -
vue的js文件中使用vue实例
1.单独引入2.在main.js导出原创 2019-06-04 19:53:50 · 1153 阅读 · 0 评论 -
bus总线的使用
非父子组件传递事件常用方案// main.jsconst BUS = new Vue()Vue.prototype.BUS = BUS// A.vuethis.BUS.$emit('changeSidebar') // changeSidebar和$on处一致即可// B.vuemounted () { this.BUS.$on('changeSidebar', () =>...原创 2019-06-04 18:45:22 · 1176 阅读 · 0 评论 -
query和params传参
query传参会显示在url,刷新依然在;params如果配置了路由,会以/val1/val2的形式值显示在路由,刷新不会丢失;如果不配置路由,数据不会显示在url,刷新会丢失。// querythis.$router.push({ path: '/publicOpinionManage/publicOpinionMonitor/news', query: this.utils.enc...原创 2019-06-03 15:08:04 · 3729 阅读 · 0 评论 -
vue中引入图片的方式
一.对于静态的img,正常引入即可:<img src="@/assets/img/login/user.png"> // 可以使用@二.当使用模板绑定src时:// 不可以使用@,无法解析;也无法找到assets目录<img :src="@/assets/img/login/user.png"> 方式1:// 将图片放到static目录下<img :...原创 2019-06-03 14:50:07 · 2685 阅读 · 0 评论 -
vue-cli2:引入less和配置less变量可全局使用
一.安装lessnpm i less less-loader --save-dev二.设置less变量到全局// 1.安装sass-resources-loadernpm install sass-resources-loader --save-dev// 2.配置build/utils.js,找到exports.cssLoaders函数,如下exports.cssLoaders ...原创 2019-06-06 18:39:02 · 3075 阅读 · 2 评论 -
解决:this.$router.push()同一路由不同参数,视图不更新问题
一.不触发生命周期1.监听route,在监听函数内操作数据2.在事件函数内操作数据二.触发生命周期3.this.$forceUpdate()4.给根元素绑定v-if:触发重新渲染5.给根元素绑定:key:通过更改key触发重新渲染...原创 2019-05-10 17:00:24 · 3760 阅读 · 0 评论 -
vuex
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment (state) { state.count++ } }, actions: { increment (context) { context.commit('increment...原创 2019-04-22 17:49:19 · 85 阅读 · 0 评论