vue
鱼柠檬
初级菜鸟,学习笔记
展开
-
解决vuex刷新浏览器或者F5刷新,数据丢失问题
在vue项目中存储数据一般都会vuex,vuex有个问题一刷新数据就不见了,重置为默认值,那要解决这个办法怎么办?1. vuex 的优缺点 优:相比sessionStorage,存储数据更安全,sessionStorage可以在控制台被看到 缺:在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。2.解决插件vuex-persistedstate原理:将vuex的state存在localStorage或sessionStorage或cookie中刷新页面的一瞬.原创 2022-04-18 11:31:47 · 1067 阅读 · 0 评论 -
antd vue的面包屑结合路由的实现记录
使用背景,公司大佬集成的的一个vue为基础的框架,在使用中大佬的按照常规来写的面包屑处理方式,与现实项目中需求有所出入,自己更改了一下,记录一下,防止以后遇到。Breadcrumb面包屑场景:html<a-breadcrumb :routes="breadcrumb" separator=">"> <template #itemRender="{route, routes, paths}"> <span v-if="routes.ind.原创 2021-04-22 11:19:36 · 3312 阅读 · 2 评论 -
Vuex mutation的常量的设计风格
先建一个文件夹,在文件夹的index.js 中将定义的mutation 收集起来,1.防止定义名字的时候重复,2.收集起来清晰一目了然在store.js中先引入,在使用,如图页面中使用,先引用在使用原创 2020-12-31 15:49:38 · 267 阅读 · 0 评论 -
Vuex getters 共享状态的计算属性
state中存的数据并不是最终页面中使用的数据,例如A页面需要3个 B页面需要全部。我们取数据的时候肯定希望取得时候就是需要的数据,而不是取到以后在进行处理数据拿到想要的,那么getters就起到了重要的作用(可以处理一下原始的数据,把你想要的数据过滤出来)例如我再页面中 去state 中数据的前三个就可以这样在页面中使用getters 的返回值会根据它的依赖被缓存起来,且只有当然得依赖值发生了改变才会被重新计算默认的参数 是指向state 中定义的状态,state可以看做是原始状态,g.原创 2020-12-31 15:04:04 · 166 阅读 · 0 评论 -
vuex mapState的接收写法 与由mapstate 所引发的导入导出写法
在state中定义好全局状态后,页面中接收的写法this.$store.state.xxx导入import { mapState } from 'vuex'es6写法1. computed: { isShow () { return this.$store.state.isTabberFlag } },2. // vuex 的另外一种导出的方法 computed: mapState(['isTabberFlag']),3.computed.原创 2020-12-31 14:34:23 · 550 阅读 · 0 评论 -
vuex action异步缓存,实现数据缓存在state中,减少请求,提高性能
接上一篇异步:用action做后端数据的缓存使用步骤:在state中定义一个变量用来做状态管理取这个变量this.$store.state.xxxx通过this.$store.dispatch('getComingListAction')将异步请求dispatch 到action中到state.js 的actions 中进行异步请求将接口的数据提交到mutation中在mutation 中将提交来的值赋值给 store 中的变量(状态)上代码1.在state中定义一个变量用来做状.原创 2020-12-30 17:23:49 · 1184 阅读 · 0 评论 -
Vuex的实战应用(1)
关于VueXVueX是适用于在Vue项目开发时使用的状态管理工具。试想一下,如果在一个项目开发中频繁的使用组件传参的方式来同步data中的值,一旦项目变得很庞大,管理和维护这些值将是相当棘手的工作。为此,Vue为这些被多个组件频繁使用的值提供了一个统一管理的工具——VueX。在具有VueX的Vue项目中,我们只需要把这些值定义在VueX中,即可在整个Vue项目的组件中使用。Vuex 是什么?Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,原创 2020-12-30 15:17:37 · 302 阅读 · 0 评论 -
vuex中管理数据,刷新后数据丢失问题
在做vue项目的过程中有时候会遇到一个问题,就是进行F5页面刷新的时候,页面的数据会丢失,出现这个问题的原因是因为当用vuex做全局状态管理的时候,store中的数据是保存在运行内存中的,页面刷新时会重新加载vue实例,store中的数据就会被重新赋值,因此数据就丢失了,解决方式如下:解决方法一:最先想到的应该就是利用localStorage/sessionStorage将数据储存在外部,做一个持久化储存,下面是利用localStorage存储的具体方案:方案一:由于state中的数据是响应式的,而数转载 2020-12-17 10:22:05 · 138 阅读 · 0 评论 -
Vue 中 普通input聚焦的方法
自定义v-focus指令使用普通input输入框:<input type="text" v-focus>directives: { focus: { inserted: function (el) { el.focus() } } },原创 2020-12-01 10:52:04 · 625 阅读 · 0 评论 -
vue 吸顶菜单效果小demo
整个吸顶小demo场景描述,如下图:功能描述:当滚动条划过轮播图的时候 让正在热映和即将上映 这块吸顶,滚动条滚动回去的时候吸顶消失吸顶效果逻辑:当滚动条滚动一定的距离例如(轮播图)的时候加一个class 滚回来删除那个class** 如果滚动距离大于等于轮播的高度 fixed 小于 unfixed1.滚动距离怎么获取:(document.documentElement.scrollTop) 操作原生2.轮播图高度怎么动态获取:* 原生做法: 给dom 起个id 获取到dom .原创 2020-11-30 11:28:13 · 239 阅读 · 0 评论 -
【报错】Cannot find module ‘core-js/modules/es6.function.name‘的解决办法
因为不识别es6语法导致的,执行以下命令npm install core-js@2原创 2020-11-25 18:10:40 · 4521 阅读 · 0 评论 -
vue路由守卫的基本使用
路由守卫又叫路由钩子,路由守卫,路由卫士,路由拦截为什么要有路由守卫?通俗点就是帮你看门的,你得有凭证才能让你进。举个栗子:唐僧要去西天取经,每过一个国家,都要被国王呀,守门人啊,各种人问:请问施主你从哪里来,要往何处去?这时候唐僧再帅他也得告诉人家:贫僧自东土大唐而来,去往西天拜佛求经去的。当然说这么句话也不好使,说了他得有凭证,那么通关文牒出示了,这个国王阿,守门人才会告诉你下一步该怎么做。如果你确定让国王看见唐朝皇帝的证明(通关文牒),那么肯定就会让你进入,或者通过这个国家并且好吃原创 2020-11-23 16:05:00 · 478 阅读 · 0 评论 -
vue History 模式
官方解释vue-router 默认 hash 模式 —— 使用 URL 的 hash 来模拟一个完整的 URL,于是当 URL 改变时,页面不会重新加载。如果不想要很丑的 hash,我们可以用路由的 history 模式,这种模式充分利用 history.pushState API 来完成 URL 跳转而无须重新加载页面。const router = new VueRouter({ mode: 'history', routes: [...]})当你使用 history 模式时,U原创 2020-11-23 13:51:18 · 558 阅读 · 0 评论 -
vue 命名路由的基本使用
老规矩先看官方解释有时候,通过一个名称来标识一个路由显得更方便一些,特别是在链接一个路由,或者是执行一些跳转的时候。你可以在创建 Router 实例的时候,在 routes 配置中给某个路由设置名称。const router = new VueRouter({ routes: [ { path: '/user/:userId', name: 'user', component: User } ]})要链接到一个命名路由,可以给 ro原创 2020-11-23 11:43:29 · 755 阅读 · 0 评论 -
vue 动态路由基本使用
动态路由匹配(官方解释)我们经常需要把某种模式匹配到的所有路由,全都映射到同个组件。例如,我们有一个 User 组件,对于所有 ID 各不相同的用户,都要使用这个组件来渲染。那么,我们可以在 vue-router 的路由路径中使用“动态路径参数”(dynamic segment) 来达到这个效果:const User = { template: '<div>User</div>'}const router = new VueRouter({ routes:原创 2020-11-23 11:14:41 · 969 阅读 · 0 评论 -
vue 二级路由以及重定向
重定向重定向通过routes 配置来完成栗子:import Vue from 'vue'import Router from 'vue-router' import Film from '@/views/Film.vue'import Cinema from '@/views/Cinema.vue'import Center from '@/views/Center.vue'Vue.use(Router)export default new Router({ routes: [原创 2020-11-19 15:26:19 · 4222 阅读 · 0 评论 -
vue路由声明式导航:router-link详解(4)
声明式导航原生的方法:window.onhashchange 监听路径的切换vue提供的组件:router-link官方解释: 组件支持用户在具有路由功能的应用中 (点击) 导航。通过 to 属性指定目标地址,默认渲染成带有正确链接的 a 标签,可以通过配置 tag 属性生成别的标签.。另外,当目标路由成功激活时,链接元素自动设置一个表示激活的 CSS 类名router-link小栗子1.在components下面新建一个Tabbar组件<template> &l原创 2020-11-17 15:22:15 · 546 阅读 · 0 评论