解决: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. javascript入门教程(二):变量

    大家好,我从今天开始就会正式讲javascript的语法方面.变量 js中的变量一般使用var来声明(es6的let不在本教程讨论范围内),可以用来定义任何种类的变量,如果只对变量进行了定义而没有赋值 ...

  2. 实用的 CSS — 贝塞尔曲线(cubic-bezier)

    欢迎移步我的博客阅读:<实用的 CSS - 贝塞尔曲线(cubic-bezier)> 前言 在了解 cubic-bezier 之前,你需要对 CSS3 中的动画效果有所认识,它是 anim ...

  3. 实现拖拽复制和可排序的react.js组件

    在实现复制前,对之前的拖拽排序组件属性进行了修改. 摒弃了value中的content属性,拖拽组件暴露的render函数,利用这个属性进行组件内部子组件的渲染,这点主要是参考了蚂蚁金服的Ant de ...

  4. Linux 0.11源码阅读笔记-文件IO流程

    文件IO流程 用户进程read.write在高速缓冲块上读写数据,高速缓冲块和块设备交换数据. 什么时机将磁盘块数据读到缓冲块? 什么时机将缓冲块数据刷到磁盘块? 函数调用关系 read/write( ...

  5. python-输入列表,求列表元素和(eval输入应用)

    在一行中输入列表,输出列表元素的和. 输入格式: 一行中输入列表. 输出格式: 在一行中输出列表元素的和. 输入样例: [3,8,-5] 输出样例: 6 代码: a = eval(input()) t ...

  6. java中什么是Interface接口, 请给个实例!

    1.Interface接口的定义和用法  先直接上大白话:马克-to-win:接口就是灰常灰常抽象的抽象类,我们可以就像用抽象类一样用接口,只不过,interface抽象到不能再抽象了,以至于里面不能 ...

  7. FastAPI(七十四)实战开发《在线课程学习系统》接口开发-- 删除留言

    之前文章FastAPI(七十三)实战开发<在线课程学习系统>接口开发-- 回复留言,那么我们这次分享删除留言接口的开发 可以对留言进行删除,这里的删除,我们使用的是逻辑的删除,不是物理删除 ...

  8. [转]Fabric2.3中使用test-network搭建测试网络

    这个测试网络一方面可以用来学习Fabric,另一方面也可以让一些更有经验的开发者来测试他们的智能合约和应用,但是不建议用于生产环境,在2.0版本后,这个测试网络也取代了原来的"first-n ...

  9. 小程序容器助力打造企业超级App

    阿拉丁研究院发布<2021 年度小程序互联网发展白皮书>显示,2021 年全网小程序数量已超 700 万,其中微信小程序开发者突破 300 万,DAU 超过 4.5 亿:日均使用次数同比增 ...

  10. SpringMVC 解析(五)URI链接处理

    URI在网络请求中必不可少,Spring提供了一些工具类用于解析或者生成URL,比如根据参数生成GET的URL等.本文会对Spring MVC中的URI工具进行介绍,本文主要参考Spring官方文档. ...