解决:Vue刷新时获取不到数据

解决方案:1.本地存储 2.Vuex数据持久化工具插件

本地存储

import Vue from "vue";
import Vuex from "vuex"; Vue.use(Vuex); export default new Vuex.Store({
state:{
count:sessionStroage.getItem('da')
},
mutations{
eventStroage(state){
sessionStorage.setItem('da',state.count)
}
},
......
}) //组件中使用 <div class="home">
{{$store.state.count}}
<!-- 绑定一个方法 -->
<button @click="$store.commit('eventStroage')">加一</button>
</div>
</template>

vuex-persist插件

(1)项目安装:
npm install vuex-persist -s
(2)main.js引入:
import VuexPersistence from "vuex-persist"
(3)创建持久化存储对象;
var vueLocal=new VuexPersistence({
// storage 存储方式 默认的是localStorage存储,可以修改成会话存储(window.sessionStorage)
storage:window.localStorage
})
(4)store中定义
export default new Vuex.Store({
state:{...},
mutations:{...},
actions: { ... },
plugins: [vueLocal.plugin]
})

VueX数据持久化的更多相关文章

  1. vuex数据持久化存储

    想想好还是说下vuex数据的持久化存储吧.依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解.当涉及到非父子组件之间通信时,选择了vuex.只是后来竟然发 ...

  2. vuex数据持久化插件--指定持久化特定的值

    指定需要持久化的state,配置如下 import createPersistedState from "vuex-persistedstate" conststore = new ...

  3. vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化

    render函数使用jsx语法: 安装插件  transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...

  4. Vuex数据可视化

    参考:https://gitee.com/hjm100/codes/46towe9v28a1bxfqhc7kl34 Vuex虽然能存储数据,但是一刷新就没有了,如果要实现数据持久化,就需要用vuex- ...

  5. Redis学习总结(1)——数据持久化

    以前研究Redis的时候,很多东西都不太明白,理解得也不太深,现在有时间重新拾起来看看,将一些心得记录下来,希望和大家一起探讨. 一.简介 Redis是一个单线程高可用的Key-Value存储系统,和 ...

  6. iOS之数据持久化方案

    概论 所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) ...

  7. Docker数据持久化与容器迁移

    上节讲到当容器运行期间产生的数据是不会在写镜像里面的,重新用此镜像启动新的容器就会初始化镜像,会加一个全新的读写入层来保存数据.如果想做到数据持久化,Docker提供数据卷(Data volume)或 ...

  8. iOS 两行代码解决数据持久化

    在实际的iOS开发中,有些时候涉及到将程序的状态保存下来,以便下一次恢复,或者是记录用户的一些喜好和用户的登录信息等等. 这就需要涉及到数据的持久化了,所谓数据持久化就是数据的本地保存,将数据从内存中 ...

  9. iOS的数据持久化

    所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) pr ...

随机推荐

  1. 用jq实现移动端滑动轮播以及定时轮播效果

    Html的代码: <div class="carousel_img"> <div class="car_img" style="ba ...

  2. SQL之总结(四)---null问题的处理

    概述:如果表中的某个列是可选的,那么我们可以在不向该列添加值的情况下插入新记录或更新已有的记录.这意味着该字段将以 NULL 值保存. NULL 值的处理方式与其他值不同. NULL 用作未知的或不适 ...

  3. 理解Android Framework

    一 . Android 系统架构 Android是一个包括操作系统,中间件和关键应用的移动设备软件堆: 作为一个开源的软件,android包含了众多的功能和庞大的代码,他的代码基于linux. 1. ...

  4. css实现半圆效果

    效果图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...

  5. 在ios里面返回上一级报错问题

    $("#backPrev").attr("href","javascript:void(0);").click(function(){    ...

  6. 单位ren vw vh 和 vm

    px: (像素)就是一张图片最小的一个点 em :参考物是父元素的font-size,具有继承的特点 rem: 参考物是HTML的font-size

  7. 消息中间件MQ的学习境界和路线

    在<深入理解Java类加载机制,再也不用死记硬背了>里我提到了对于一门语言的"会"的三个层次.本篇将以知识地图的形式展现学习消息中间件MQ各个层次要掌握的内容. 知识地 ...

  8. win内核漏洞提权

    WIN系统溢出漏洞提权 漏洞筛选 在整个提权项目中,前提是拿到webshell. 关于系统的溢出漏洞,我推荐两个项目: https://github.com/chroblert/WindowsVuln ...

  9. C++---继承和派生

    继承和派生 在C++中, 代码重用是通过继承机制来实现的 继承, 就是在一个已经存在的类的基础上, 再建议一个新类 从已经有的类派生出新的类, 派生类就继承了基类的特征, 包括成员和方法 继承可以完成 ...

  10. python中其他数据类型内置方法

    补充字符串数据类型内置方法 1.移除字符串首尾的指定字符可以选择方向1: s1 = '$$$jason$$$' print(s1.strip('$')) # jason print(s1.lstrip ...