解决: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. “一键”生成HTML——Emmet插件常用语法

    Emmet是一款文本编辑器/IDE的插件,用来快速生成复杂的HTML代码,只要掌握一些常用的语法(类似于CSS选择器),就可以减少重复编码的工作(主要是懒).我个人惯用的是sublime,因此下文介绍 ...

  2. 前端存储 - localStorage

    发布自Kindem的博客,欢迎大家转载,但是要注意注明出处 localStorage 介绍 在HTML5中,引入了两个新的前端存储特性: localStorage sessionStorage 这两者 ...

  3. java中Array(数组)的用法

    8.Array(数组)    数组是作为对象来实现的.(really occupy the memopry,真实的占用内存 ) An array is a data structure that st ...

  4. es6语法之模版字符串

    //es6语法之`${}`以及vue语法 `${ }` (模版字符串)const name = '小缘' const age = 14 console.info(`大家好,我叫${name},今年${ ...

  5. Mysql中如何开启慢查询功能?

    1.修改mysql的配置文件my.ini,增加如下信息,修改之后需要重启mysql服务器. 2.执行一句sql查询语句,结果如下. mysql> select count(*) from ecs ...

  6. 《头号玩家》AI电影调研报告(三)

    [AR市场正在迅猛增长] 据<工业增强现实现状2017>报告中所述,AR不再只是值得期待的新兴技术.2018年,投资此类技术已成为很多组织机构的关键战略,尤其是对于涉及复杂的制造和运营流程 ...

  7. CommonsCollection7反序列化链学习

    CommonsCollections7 1.前置知识 Hashtable Hashtable实现了Map接口和Serializable接口,因此,Hashtable现在集成到了集合框架中.它和Hash ...

  8. kafka生产者调优手册

    目录 第一章 kafka硬件配置选择 1.1 场景说明 1.2 服务器台数选择 1.3 磁盘选择 1.4 内存选择(堆内存,页缓存) 1.4.1 堆内存配置 1.4.2 页缓存选择 1.5 cpu选择 ...

  9. Kubernetes 解决方案-图解

  10. 【Example】C++ STL 常用容器概述

    前排提醒: 由于 Microsoft Docs 全是机翻.所以本文表格是我人脑补翻+审校. 如果有纰漏.模糊及时评论反馈. 序列式容器 序列容器是指在逻辑上以线性排列方式存储给定类型元素的容器. 这些 ...