精华内容
下载资源
问答
  • (3)要想刷新数据丢失就必须把数据存储在外部,例如:Local Storage、Session Storage、Index DB等。这些都是浏览器提供的API,让你可以将数据存储在硬盘上,做持久化存储。 2. HTML5提供的2种客户端存储数据...
  • 【一】vuex数据存储在内存中,页面一刷新就会丢失 vuex中存储的内容:人员信息。 解决办法: 1:人员登陆成功时,将人员信息保存到vuex和sessionStorage里面各一份。 2:页面刷新时,在App.vue里面取出...

    【一】vuex的数据存储在内存中,页面一刷新就会丢失

    vuex中存储的内容:人员信息。

    解决办法:

    1:人员登陆成功时,将人员信息保存到vuex和sessionStorage里面各一份。

    2:页面刷新时,在App.vue里面取出sessionStorage保存的人员信息,并设置到vuex中去。如果路由里面做了根据vuex里面是否有人信息来判断是否登陆的,需要修改为判断sessionStorage里面是否有值,因为刷新时,vuex里面的内容已经消失了,先走的路由,然后进入到App.vue页面中。

    // App.vue 改写如下:
    <script>
      export default {
        name: 'App',
        created () {
          // 解决vuex刷新导致数据丢失的问题
          //在页面加载时读取sessionStorage里的状态信息
          //console.log('1,app.vue:'+ sessionStorage.getItem('personInfo'));    
          if (!!sessionStorage.getItem("personInfo")) {
            //console.log('2,here');
            //this.$store.replaceState(Object.assign({}, this.$store.state.personInfo, JSON.parse(sessionStorage.getItem("personInfo"))))
            this.$store.commit('setPersonInfo', JSON.parse(sessionStorage.getItem('personInfo')))
          } 
        }
      }
    </script>

    有的说在使用这个onbeforeunload事件,但是我测试怎么都触发不了。

    然后路由判断是否登陆改为:

    router.beforeEach((to, from, next) => {
      Loading.open('努力奔跑中...');
      document.title = to.matched[0].meta.title;	 //更改各个页面的title
      if (to.meta.requireAuth) {  // 判断该路由是否需要登录权限
        const personInfo = JSON.parse(sessionStorage.getItem('personInfo'));
        const personId = personInfo.personId;
        if (!!personId) {   // 判断当前是否已登陆
          next();
        } else {  // 没有登录,微信授权登陆weixin_auth
           //
        }
      } else {
        next();
      }
    });

    自己写的测试例子暂时是这样的,确实是可以解决刷新导致vuex里面的内容丢失问题。

    展开全文
  • 通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化。例如:用户的登录信息。 下面,我们使用传递用户登录信息的例子来一步步解决这个问题。 首先,我们的第一个问题是...
  • vuex刷新数据丢失问题

    2020-05-06 10:57:57
    vuex刷新数据丢失问题 最近在做按钮权限控制,通过登录时保存后端返回的权限按钮列表至vuex时发现刷新页面时vuex中保存的数据会丢失。解决办法有两种,1.获取后保存至本地2.通过插件保存数据 一、通过本地存储...

    vuex刷新数据丢失问题
    最近在做按钮权限控制,通过登录时保存后端返回的权限按钮列表至vuex时发现刷新页面时vuex中保存的数据会丢失。解决办法有两种,1.获取后保存至本地2.通过插件保存数据
    一、通过本地存储localstorage保存数据,src/store中的相应js中使用

    state:{
        pmh:localStorage.getItem('buttons')||[]
    },
    mutations:{
        SET_BUTTONS:(state,buttons)=>{
            state.buttons=buttons
            localStorage.setItem('buttons',buttons)
        }
    }
    

    二、通过插件vue-savedata保存数据

    1.安装vue-savedata
    npm install vue-savedata --save
    2.src/store中的相应js中使用

    import saveData from 'vue-savedata'  
    const store = new Vuex.Store({    
    	state: {        
    		selected: {},    
    	},    
    	mutations: {        
    		setSelected(state, payload) {        
    			state.selected = payload    
    		},
    	},
    //缓存所有store数据到本地 也可以单独缓存
    plugins: [saveData()],})  
    export default store;
    
    展开全文
  • vuex刷新数据丢失的解决办法

    千次阅读 2020-11-12 09:56:52
    通常将一些数据保存在localstorage、sessionstorage或cookie中,可以保证页面刷新数据丢失且易于读取。 vue项目一般操作都在同一个页面跳转路由,所以使用sessionstorage进行存储 思路:1.vue项目刷新,app....

    通常在vue项目中使用vuex做全局的状态管理,但是刷新之后,vuex中的数据会丢失

    因为store是存储在运行内存中,当浏览器刷新时,会重新加载vue实例,store也会重新赋值

    通常将一些数据保存在localstorage、sessionstorage或cookie中,可以保证页面刷新数据不丢失且易于读取。

    vue项目一般操作都在同一个页面跳转路由,所以使用sessionstorage进行存储

     

    1.vue项目刷新,app.vue会重新加载,在created中获取之前保存过的数据,使用vuex.store的replaceState方法,替换store的根状态

    2.在浏览器刷新前将store中的数据保存在sessionstorage

     created(){
          if (sessionStorage.getItem("store") ) {
            this.$store.replaceState(Object.assign({}, JSON.parse(sessionStorage.getItem("store"))))
          }
    
          window.addEventListener("beforeunload",()=>{
            sessionStorage.setItem("store",JSON.stringify(this.$store.state))
          })
        }

     改变store中的数据,并刷新

    也可以直接使用vuex-persistedstate来保存状态(保存在localstorage)

    npm install --save vuex-persistedstate

    在store.js中添加两行配置

    import Vue from 'vue'
    import Vuex from 'vuex'
    
    import createPersistedState from 'vuex-persistedstate'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
       //...
       plugins: [createPersistedState()]
    })

    展开全文
  • vuex页面刷新数据丢失的解决办法 1.在app.vue的created方法中读取sessionstorage中的数据存储在store中,此时用vuex.store的replaceState方法,替换store的根状态 2.在beforeunload方法中将store.state存储到...
  • 将state的数据保存在localstorage、sessionstorage或cookie中,这样即可保证页面刷新数据丢失且易于读取 localStorage ​ localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失...

    原因

    因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载Vue实例,store里面的数据就会被重新赋值初始化

    解决思路

    将state的数据保存在localstoragesessionstoragecookie中,这样即可保证页面刷新数据不丢失且易于读取

    • localStorage

      ​ localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage中的数据也不会消失.localStorage除非主动删除数据,否则数据永远不会消失

    • sessionStorage

      ​ sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念,sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭,即使刷新页面或者进入同源另一个页面,数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面,sessionStorage也是不一样的

    • Cookie

      ​ Cookie生命期为只在设置的Cookie过期时间之前一直有效,即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制(各浏览器不同),一般不能超过20个。缺点是不能储存大数据且不易读取

    由于sessionStorage能保存的数据比Cookie对,且不用像localStorage每次打开页面需要清空之前的数据,所以sessionStorage是最好的选择

    <template>
      <div id="app">
        <h1>My name is {{name}}</h1>
       <button @click="updata">更新</button>
      </div>
    </template>
    
    <script>
    import {mapMutations} from 'vuex';
    export default {
      name: "App",
      data:()=>({
        name: 'Guiyun'
      }),
      components: {
      },
      created(){
        this.getName()
      },
      methods:{
        getName(){
          if (sessionStorage.getItem("name")){
            this.name = sessionStorage.getItem("name")
          }
        },
        updata(){
          sessionStorage.setItem('name', '归云');
           this.getName()
        }
      }
    };
    </script>
    
    展开全文
  • vuex刷新数据丢失的解决方法,数据,数据丢失,站长站,就会,放在vuex刷新数据丢失的解决方法易采站长站,站长之家为您整理了vuex刷新数据丢失的解决方法的相关内容。导语:我们在写vue项目的时候,经常要用到vuex...
  • 我们在写vue项目的时候,经常要用到vuex作为内存来储存,但是我们存放在vuex中的数据(用户数据,当前页面的数据等等)在刷新后就会丢失,那么如何解决呢?超级简单。 1,安装vuex-persistedstate npm install --...
  • vuex的state在localStorage或sessionStorage或其它存储方式中取值 缺点:最直观的就是,手动写比较麻烦。 2.利用vuex-persistedstate持久化插件处理 插件的原理其实也是结合了存储方式,只是统一的配置就不需要手动...
  • 简单介绍:前端开发时js可以调用api在浏览器存储数据,大小总共未5M 可再浏览器查看,f12打开控制台 方式: 1.localstorage 在本地浏览器长期存储,需要手动清除才会消失(清除浏览器缓存或调用js方法清除) 2....
  • 1,页面刷新数据丢失的原因? vuex是将state当做全局变量存储。刷新页面之后自然随着页面的刷新重新初始化state。所以存的数据也会丢失。 2,解决数据丢失,一般都会用localstorage或者cookie去缓存数据。 3,推荐新...
  • const user = { state: sessionStorage.getItem('stateUser')... JSON.parse(sessionStorage.getItem('stateUser')) : { // 处理刷新重置登录状态 showLogin: false, isLogin: false }, ```mutations: { SET_SH...
  • vuex刷新数据丢失

    2021-06-30 17:15:27
    解决vuex刷新数据丢失
  • vuex刷新数据丢失方法

    2019-04-02 15:35:43
    问题: 当刷新页面的时候vuex仓库中的数据丢失 解决方法 1、使用localStorage 2、使用sessionStorage 个人建议 对于localStorage的数据是永久保存(自己不去删除的时候),所以个人觉得不是很安全,所以使用...
  • 解决vuex页面刷新数据丢失问题(简单有效)

    万次阅读 多人点赞 2020-08-10 11:32:04
    但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被清空。 我在一个组件(例如登录组件页面)中登录...
  • 如何解决vuex页面刷新数据丢失问题?

    千次阅读 多人点赞 2018-11-12 16:26:38
    但是在页面刷新的时候vuex里的数据会重新初始化,导致数据丢失。因为vuex里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,vuex里面的数据就会被重新赋值。 2、解决思路: 办法一:将vuex中的...
  • 解决vuex刷新丢失数据
  • 页面刷新后,想保存页面未保存的数据。我们总是习惯于放在浏览器的sessionStorage和localStorage中。...vuex劣势:在F5刷新页面后,vuex会重新更新state,所以,存储的数据丢失。 为了克服这个问题,vuex...
  • VUEX刷新数据丢失问题出在哪里? 其实答案很简单,因为js代码运行在内存中,代码运行时所有的变量和函数都是保存在 内存 中的,但我们 按下F5的时候以前申请的内存将会被释放,并会被重新加载js脚本,变量重新赋值。...
  • Vuex刷新数据消失问题

    2021-05-06 20:14:17
    Vuex刷新数据消失问题 问题产生的原因: 因为store里的数据是保存在运行内存中的,当页面刷新时,页面会重新加载vue实例,store里面的数据就会被重新赋值。 解决方案 所以这些数据要想存储就必须存储在外部,例如:...
  • 将state的数据保存在localstorage、sessionstorage或cookie中,这样即可保证页面刷新数据丢失且易于读取。 localStorage: localStorage的生命周期是永久的,关闭页面或浏览器之后localStorage
  • 在我们用Vue编写类似登录页面时,我们时常会遇到页面刷新后保存在Vuex中的数据丢失的问题,所谓丢失就是Vuex中的数据再次初始化了,那么,我们该如何解决这个问题呢?下文为大家解答!!! 如图,我们在vuex.js...
  • vuex可以进行全局的状态管理,但刷新刷新数据会消失,这是我们不愿意看到的。怎么解决呢,我们可以结合本地存储做到数据持久化,也可以通过插件-vuex-persistedstate。1.手动利用HTML5的本地存储方法vuex的state...
  • vuex刷新数据丢失问题 全局 app.vue created () { //在页面加载时读取sessionStorage里的状态信息 if (sessionStorage.getItem("store") ) { this.$store.replaceState(Object.assign({}, this.$store.state,...
  • nuxt 1 配置插件(),太简单就不说了。 注意:要禁止服务端运行,不然会报错,这个事件是在客户端添加的,不是在服务端小渲染的时候添加的。 2 写代码,如下。 ... window.addEventListener('beforeunload', ()=>...

空空如也

空空如也

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

vuex刷新数据丢失

vue 订阅
友情链接: 震动.zip