解决vue2.x中数据渲染以及vuex缓存的问题

Posted 2023-05-03

参考技术A 最近在学习Vue.js，把自己遇到的问题做个记录，所以，今天添加一点小笔记。
在项目中遇到两个问题，简单的做个笔记来记录自己解决的问题，可能不是很好的处理办法，欢迎提出，自己还在不断优化中...
第一个是vue在加载页面的时候，会先加载静态资源，这个时候数据还没有请求回来，用户会先看到静态的内容（就是页面固定写死的），过一会才会有数据回来渲染，这体验是很差的，其实解决办法也很简单，就是用vue里的
v-if
来判断请求的数据是否返回...　
<div
class="container"
id="app"
v-cloak>
<div
v-if='moneyInMsg.uuid'>
<in-account-msg
:money-in-msg="moneyInMsg"></in-account-msg>
</div>
</div>
这里的
v-if
=
'moneyInMsg.uuid'
就是来判断数据有没有请求回来，如果请求回来就让他显示，没有请求到数据，就让他loading，这样体验就会好很多。在这里还需要注意的是，v-if判断的数据源，是数据返回的字段，如果两个字段只能存在其一的话，可以v-if
='a
||
b'
来判断数据是否成功的返回；还要注意的一点是，不能直接在组件里用v-if判断，也不能直接在根标签里判断，直接嵌套一个div就可以解决，并不影响样式，只做数据是否正常返回的显示作用；
第二个就是在使用vuex时，有数据缓存；我遇到的情况是，在列表页点击进入详情页，返回到列表页，在进入另一个详情页的时候，数据会显示之前的数据，同时页面还在loading（接口返回的数据比较慢），过一会数据返回的时候，才重新渲染页面。可能是自己对vuex理解的不够深入，没有在vuex基础上解决这个问题。虽然曲折的解决了这个问题，但是不够zhuang,但是解决了问题，后期再做优化。
在之前解决的方案中，是进入页面的时候，重新刷新页面，重新请求数据，代码如下：
export
const
refresh
=
(title)
=>

document.title
=
title;
let
iframe
=
document.createElement('iframe');
　iframe.src
=
require('./mm.jpg');
iframe.setAttribute('style',
'display:none;');
let
loadFn
=
function
()

iframe.removeEventListener('load',
loadFn);
document.body.removeChild(iframe);
console.info('Page
Title
IS
'
+
title);
iframe
=
null;
loadFn
=
null;

document.body.appendChild(iframe)
iframe.addEventListener('load',
loadFn);

但是没有达到预期的效果，依然会出现上面的情况...
丫的,抓狂了...（被别人催的感觉真的不爽...）
百度啊，google啊，都没有遇到这种情况的？找到一个，还是提问的，没有回答的，好吧，还是靠自己。自己动手，丰衣足食啊...
思路是，定义一个参数status为false，当数据没有请求回来，就不显示，也是用上面的方式来判断，一直loading（请求失败，去掉loading），当数据返回的时候，让status为true；使用$nextTick来更新数据...
贴上自己部分的代码作为参考:
<template>
<div
v-if='status
&&
order.name'>
//页面展示的数据
</div>
</template>
<script>
export
default
data()
return

status：false

,
created()
　　
var
_this
=
this;
this.setDd(res
=>
_this.$nextTick(function()
_this.status=
true
);
)
,
computed:
...mapGetters(//getter获取的数据)
,
methods:
...mapActions(['setDd'])
//获取数据的方法


</script>
处理的方式比较丑陋...,但是实现了想要的效果；这里注意一点就是v-if的判断问题。（v-if='status
&&
order.name'）这个用了并且，目的是有数据返回，才能让他显示，如果没有数据，会显示静态的值，数据都为underfind...
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

解决vuex 数据丢失问题

目录

• 解决Vuex刷新页面数据丢失的问题
• • 方法1：使用第三方库 vuex-persistedstate
  • • 01 store / index.js 之 localStorage
    • 02 store / index.js 之 sessionStorage
    • 03 store / index.js 之 使用vuex-persistedstate指定需要持久化的state
  • 方法2 把state的数据先缓存到localStorage之中，页面刷新的时候，拿到数据写入vuex

解决Vuex刷新页面数据丢失的问题

• copy于

方法1：使用第三方库 vuex-persistedstate

• npm install --save vuex-persistedstate

01 store / index.js 之 localStorage

- 注意点： vuex-persistedstate默认存储在 localStorage之中，基本上不需要配置什么

import createPersistedState from "vuex-persistedstate"
const store =newVuex.Store(
　　state: 
　　　　cartList: [],
　　,
　　mutations: ,
　　actions: ,
　　// 当state中的值发生改变，此时localStorage中的vuex的值会同步把state中的所有值存储起来，当页面刷
　　　新的时候，state的值会从localStorage自动获取vuex的value值，赋值到state中
　　plugins: [createPersistedState()] 
)

02 store / index.js 之 sessionStorage

import createPersistedState from "vuex-persistedstate"
const store = new Vuex.Store(
   state: ,
   mutations: ,
   actions: ,
   plugins: [createPersistedState(
       storage:window.sessionStorage  // 同localStorage相同，只是将vuex的所有值存储到sessionStorage中
   )]
)

03 store / index.js 之 使用vuex-persistedstate指定需要持久化的state

import createPersistedState from "vuex-persistedstate"

const store = newVuex.Store(
 state: 
　　count: 0
,
 mutations: ,
 actions: ,
 plugins: [createPersistedState(
 　　storage:window.sessionStorage,
 　　reducer(val)  
         // 此时，当count发生改变的时候，就会调用此函数，并且val的值为当前state对象，return的值为当前本地存储的value值（本地存储的key值为vuex）
         return 
             count: val.count,
　　　　  　　 changeCount: 'aaa'
         
     
 )]
）

方法2 把state的数据先缓存到localStorage之中，页面刷新的时候，拿到数据写入vuex

• store / index.js

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
 
export default new Vuex.Store（
    state: 
       orderList: [],
       menuList: []
   ,
    mutations: 
        orderList(s, d) 
          s.orderList= d;
          window.localStorage.setItem("list",jsON.stringify(s.orderList))
        ,  
        menuList(s, d) 
          s.menuList = d;
          window.localStorage.setItem("list",jsON.stringify(s.menuList))
       ,
   
）

• 页面刷新的时候
  • 通过监听beforeunload事件来进行数据的localStorage存储，beforeunload事件在页面刷新时进行触发，具体做法是在App.vue的created()周期函数中下如下代码

if (window.localStorage.getItem("list") ) 
    this.$store.replaceState(Object.assign(, this.$store.state,JSON.parse(window.localStorage.getItem("list"))))
 
 
window.addEventListener("beforeunload",()=>
    window.localStorage.setItem("list",JSON.stringify(this.$store.state))
)