Vuex持久化 &vue组件设置背景色

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vuex持久化 &vue组件设置背景色相关的知识,希望对你有一定的参考价值。

参考技术A

       在F5刷新页面后,vuex会重新更新state,所以,存储的数据会丢失。为了克服这个问题, vuex-persistedstate出现了~~

       将vuex的state存在localStorage或sessionStorage或cookie中一份,刷新页面的一瞬间,vuex数据消失,vuex会去sessionStorage中得到数据,变相的实现了数据刷新不丢失~

(1)解决前奏:order一个对象,当访问它没有的属性时会返回undefined,再访问undefined的address时就会直接报错

(2)找到原因:
       数据请求是异步的,在页面进行挂载的时候,数据还没传过来,但是我们已经开始访问data中order这个对象了, 页面挂载完成(vue生命周期mounted) ,页面会因为order暂时没有数据而显示undefined。
      当数据传过来后,data中的数据发生改变,触发 更新的钩子(生命周期updated) ,然后就会渲染到页面上,所页面正常显示

(3)解决:使用逻辑运算(逻辑与&&)

vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据

需求:通过不同的参数复用同一组件,实现动态加载数据和图片,同时,在页面刷新时,图片依旧可以加载成功。

过程出现的bug和问题:

  1、使用params传参后,再次刷新页面,参数丢失导致数据无法再次加载

  2、改用query进行传参后,页面刷新后图片无法加载,这是由于图片的url是在created钩子函数调用查询数据api后才进行赋值,而赋值之后页面已经渲染完成,导致图片无法加载成功

解决方案:

  1、通过localStorage将数据持久化,在跳转到当前路由时,先使用localStorage将数据持久化,这里可以配合vuex进行操作

  2、页面渲染前,图片的url直接读取localStorage的值,就不会出现页面渲染完成,url还没被赋值导致图片无法加载的情况

附上代码:

  需要从 /zyview 跳转至 /viewmessage

  /zyview跳转部分:

      this.$router.push({
        // path: `/viewmessage/${this.names[index]}`,
        // 使用下列方法方法跳转路由,就不会出现点击tab后再次跳转的bug
        name: "viewmessage",
        query: { 
          name: this.lists[index].m_name,   // 此为药品名称
          index: index,         // 药材索引
          mid: this.lists[index].id,  // 药材id
          // imgpath: this.lists[index].img_path
        },
      });

  触发跳转的方法:

    gotodescribe(e,index) {
      console.log(this.lists[index].id)
      console.log(this.test)
      const path = this.lists[index].img_path
      // 这里path和index是和store中actions方法里面的变量名意义对应,名字不对应无法传值
      this.$store.dispatch(‘addimagepath‘, {path,index})
      console.log("存储内容" + this.$store.state.imgpath.imgpaths[this.$route.query.index])
      this.$router.push({
        // path: `/viewmessage/${this.names[index]}`,
        // 使用下列方法方法跳转路由,就不会出现点击tab后再次跳转的bug
        name: "viewmessage",
        query: { 
          name: this.lists[index].m_name,   // 此为药品名称
          index: index,         // 药材索引
          mid: this.lists[index].id,  // 药材id
          // imgpath: this.lists[index].img_path
        },
      });
    },

  这是跳转前将数据持久化的步骤:

this.$store.dispatch(‘addimagepath‘, {path,index})

以下为vuex部分,新建一个文件写此存储图片路径的模块:

const state = {
    // 图片路径
    imgpaths: [],
    // imgpaths: localStorage.getItem(imgpaths[index]),
    test: "b4b797913756456bb5ffd8d661ab79e5.jpg"
}
const getters = {

}
// 改变state状态
const mutations = {
    addimgpath(state,{path,index}){
        state.imgpaths[index] = path
        localStorage.setItem(index,path)  // 这里使用localStorage持久化数据,后面页面就直接读取localStorage中的数据
    }
}
const actions = {
    addimagepath(context,{path,index}){
        context.commit(‘addimgpath‘,{path,index})
    }
}


export default {
    state,
    getters,
    mutations,
    actions
}

   /viewmessage部分:

        <el-image
          :src="`http://image.zysuyuan.cn:8031/${this.path}`"
          style="width: 400px; height: 400px"
          :fit="fit"
          alt="药材"
        ></el-image>
  data() {
    return {
      path: localStorage.getItem(this.$route.query.index),
      .........
    }
}

  created和watch:

  created() {
    this.fetchData();
  },

  watch: {
    $route(to, from) {
      this.path = localStorage.getItem(this.$route.query.index);
      this.fetchData();
    }
  },

 

 

  

以上是关于Vuex持久化 &vue组件设置背景色的主要内容,如果未能解决你的问题,请参考以下文章

vue:使用不同参数跳转同一组件,实现动态加载图片和数据,以及利用localStorage和vuex持久化数据

Vue js 2 *私下*保存组件的数据

移动端vue项目模板

vue3 封装使用 pinia (可直接使用,包含数据持久化)

从持久存储重新水化后,Vuex getter 不会更新

vue-persist 为 vuex 持久化!!