精华内容
下载资源
问答
  • 利用本地存储,解决问题Vue 刷新后用户名消失,store数据丢失

    目录

    背景

    问题

    方法一 持久化vuex (不推荐)

    方法二 跟本地存储写作


    背景

    登录的时候把用户信息存储到vue.store中,同时页面上也会显示用户名等信息。

    问题

    当页面刷后,就会发现 用户名 消失了解决

    方法一 持久化vuex (不推荐)

    感觉蛮好用的, 测试后才发现,太迟久了,我退出浏览器后,用户信息都还留着QAQ

    1 安装插件 

    npm install vuex-persistedstate --save

     2 加载

    在store/index.js中加载插件

    import Vue from 'vue'
    import Vuex from 'vuex'
    import createPersistedState from 'vuex-persistedstate' // vuex持久化
    
    Vue.use(Vuex);
    
    export default new Vuex.Store({
      modules: {
        ...
      },
      getters: {
        ...
      },
      plugins: [createPersistedState()] // vuex持久化
    })
    

    方法二 跟本地存储写作

    经过检查发现是,页面刷新后store中数据被清空。

    store是用来存储组件状态的。刷新页面时,vue实例重新加载,store会被重置。所以,一些不应该被重置的数据,应该使用本地存储来进行存储。

    本地存储

    1. cookie: 不适合大量数据的存储。
    2. localStorage: 是永久存储,浏览器关闭后数据不会丢失,除非主动删除数据。当关闭页面后重新打开,会读取上一次打开的页面数据。
    3. sessionStorage: 在浏览器当前窗口关闭后自动删除。

    总结:sessionStorage 比较合适存储用户信息,当浏览器关闭后,自动清楚数据。

    beforeunload 会在页面刷新时触发

      只要监听 beforeunload ,让页面在刷新前将数据存到 sessionStorage 中;

      在页面刷新后,读取 sessionStorage 中的数据到 store 中,即可实现store信息的即时存储。

    app.vue

    <!--app.vue-->
    <template>
    </template>
    
    <script>
      export default {
        name: 'App',
        data() {
          return {
          }
        },
        created() {
          // 在页面加载时读取sessionStorage里的状态信息
          if (sessionStorage.getItem('store')) {
            this.$store.replaceState(
              Object.assign(
                {},
                this.$store.state,
                JSON.parse(sessionStorage.getItem('store'))
              )
            )
            // console.log(JSON.parse(sessionStorage.getItem('store')))  // 打印
          }
    
          // 在页面刷新时将vuex里的信息保存到sessionStorage里
          // beforeunload事件在页面刷新时先触发
          window.addEventListener('beforeunload', () => {
            sessionStorage.setItem('store', JSON.stringify(this.$store.state))
            // console.log(JSON.parse(sessionStorage.getItem('store')))  // 打印
          })
        },
      }
    </script>
    

     

    展开全文
  • 样式错乱解决方法 ...首先,用params传参的刷新肯定会失去数据的,这里用query的方式,需要将数据转为JSON格式 let data = JSON.stringify({ UserInfo: this.UserInfo, domain: this.domain, loginUserDat

    样式错乱解决方法

    将公用样式引入app.vue中

    <style>
    @import "./views/xxx.css";
    <style>
    

    数据丢失解决方法

    首先,用params传参的刷新肯定会失去数据的,这里用query的方式,需要将数据转为JSON格式

    let data = JSON.stringify({
              UserInfo: this.UserInfo,
              domain: this.domain,
              loginUserData: this.loginUserData
            })
          this.$router.push({
            path: "userEdit",
            query: {data}
          });
    

    然后在跳转的路由中/created/mounted中获取

    let data = JSON.parse(this.$route.query.data)
    

    也可以放localstorage里,方法一样,也是需要转成JSON字符串

    展开全文
  • vue query传参刷新后数据消失问题

    万次阅读 2019-01-11 11:50:48
    但是刷新后数据消失了; 解决方案: params传参: this.$router.push({name:'list', params:{user: id}}) 取值: this.$route.params.user 发现可以渲染;但是一刷新就变成了[object object] 需要在router....

    需求:通过url传参页面跳转当时能正常渲染;但是刷新后数据就消失了;

    解决方案:

    params传参:

    this.$router.push({name:'list', params:{user: id}})

     取值:

    this.$route.params.user

     发现可以渲染;但是一刷新就变成了[object object]

    需要在router.中修改

    routes: [
        {
          path: '/list/:user',
          name: 'list'
        }
    ]

     query传参问题 

     

    this.$router.push({ name: 'NewsDetail', query: { newsUrl: url } })

    取:

    this.$router.query.newsUrl

     如果还是报object:

    就用JSON.stringify来转成字符串

            <YButton @click="$router.push({path:'/chat',query:{user:JSON.stringify(targetUser)}})">发消息</YButton>
    

    取:

    //js:
    
    JSON.parse(this.$route.query.user)
    
    //vue方法 
     beforeRouteEnter(to, from, next) {
        next(vm => {
          // vm.targetUser = JSON.parse(to.params.user)
          vm.targetUser = JSON.parse(to.query.user)
        });
      }

     

    展开全文
  • vue关于数据刷新消失问题

    千次阅读 2018-05-04 12:36:32
    数据不能持久化解决方法:使用localstorage等存储,自己写起来总是有bug直接使用了vuex-persistedstate问题2.vue-router路由传参发现使用params传参,页面刷新参数消失造成请求失败解决方法 this.$router.push('...

    问题1.在使用vuex过程中跳转页面上获得的state在刷新页面后变为初始值,即数据不能持久化

    解决方法:使用localstorage等存储,自己写起来总是有bug直接使用了vuex-persistedstate

    问题2.vue-router路由传参发现使用params传参后,页面刷新参数消失造成请求失败

    解决方法

      this.$router.push('/xx',{
    name:xx所对应的组件名.在路径匹配里面也有这一项
    1.params:{参数1:值}
    2.query:{参数1:值}
      })
    获取:this.$route.params/query.xx
    区别:params在地址栏不显示参数,query显示
         刷新页面后params参数消失,query不消失若传的值为对象时,刷新获取有问题,可以通过JSON.stringify来转换
    解决数据丢失:1.params在path中 /:id 即可
                 2.使用web存储

    展开全文
  • vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数里请求,b页面用的...
  • vue-cli中使用vuex 刷新后数据消失问题 这个时候要用localStorage 参考 //使用情况 其他代码省略 //Header.vue中 <template> <div id="header"> <div class="s-input"> <input type="text" ...
  • vue项目中解决浏览器刷新vuex数据消失问题 说明 vuex中的数据经过浏览器刷新后会消失,所以应设置在浏览器刷新之前将数据存入浏览器或者cookie中。 操作 打开App.vue,在created()加入: //从浏览器...
  • 问题说明:登陆成功,后台返回token我设置到Vuex中去了,但是跳转到主页的时候token没了 如果你还不知道怎么设置vue多...window.location.href跳转会导致你的页面刷新,从而丢失Vuex的数据 如果你是单页面刷...
  • 1.使用query进行传参,这时参数会显示在地址栏中,可使用一些加密算法进行加密。
  • 第二:刷新后store数据消失,页面无法加载 解决思路 通过多种尝试,最终我选择了利用事件监听,增加缓存来实现,目前视觉效果还是可以的; 第一:菜单问题解决 1、可以在生命周期created中通过监听beforeunload事件...
  • 第一次打开页面,会获取不到数据,关闭再打开,第二次就获取到了数据,而且当点击刷新时,数据也会消失 原因: store中的数据是保存在运行内存中的,页面刷新时会重新加载vue实例,store中的数据就会被重新赋值,...
  • sessionStorage默认的有效期是浏览器的会话时间(也就是说标签页关闭消失了)。 localStorage作用域是协议、主机名、端口。(理论上,不人为的删除,一直存在设备中) sessionStorage作用域是窗口、协议、主机...
  • Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。 安装vuex yarn add vuex 使用 在项目 src 目录下新建 ...
  • uniapp和vue刷新后防止vuex数据清空 了解过vuex的都知道 vuex 是一个专为 Vue.js 应用程序开发的状态管理模式,它是用来存放一些页面公用的变量以便可以用来解决一些无关系页面传值困难的情况,但他有一个很大的缺点...
  • 页面刷新,其他页面保存的vuex全局数据消失,导致本页面显示异常 原因分析 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值 解决方案 将state里的数据...
  • Vuex刷新后数据消失解决方法

    千次阅读 2019-04-01 15:37:11
    先看vuex的的用法: ...import Vue from 'vue' import Vuex from 'vuex' import { createVuexAlong } from 'vuex-along' Vue.use(Vuex) export default new Vuex.Store({ state: { name: "小强", commit...
  • 1.vue-router用path,query传参,刷新页面数据消失的问题 1、要跳转的传参页:先将数组转换为字符串 如图: 2、接收页面:再将字符串转换为对象 原理:浏览器不解析,因为他是数组,所以解析不出来 3.vue中的props...
  • 主要介绍了解决vue刷新页面以后丢失store的数据问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
  • 1、dom结构说明: 【评论人、评论内容、发表评论】是子组件内容;评论列表是父组件内容; ... 分析: ...// 1.... localStorage用于持久化的本地存储,除非主动删除数据,否则数据是永远不会过期的; b....
  • 问题:vue项目登陆,将用户相关信息存在getters中,然后在项目中取getters中的username显示在右上角。 登陆进入,显示没问题 浏览器直接刷新后: 先记录问题,解决更新
  • 原因: store本意不是用来存储数据的,而是存储组件状态。 但是因为存取速度比sessionStorage快。所以还是有人用来存数据。...然后再声明周期函数created()中将session的数据替换掉vue中的store数据 不过这里有一个...
  • 上面的router-link方法是完全错误的,想要传参数这种方法确实可以传过去,但是只要页面刷新,参数就会消失! 所以要把router-link改为: (productId)" href="#">{{ item.name }}</a>
  • 在使用vuex的过程中会发现只要一刷新,state里的数据就会清空,因为vue数据是保存在内存中,所以需要状态持久化的解决方案,一般大家会推荐使用html5自带的localStorage,也可以使用vuex专用的vuex-persistedstate...
  • 平常我们在vue页面中传参最常用的就是params和query两种方法 1.params传参的使用 Onchange: function (e) { console.log(e.title); this.$router.push({ name:'ordernoted', //使用params传参这里就要用name来写...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 2,767
精华内容 1,106
关键字:

vue刷新后数据消失

vue 订阅