VueX数据持久化
解决: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数据持久化的更多相关文章
- vuex数据持久化存储
想想好还是说下vuex数据的持久化存储吧.依稀还记得在做第一个vue项目时,由于刚刚使用vue,对vue的一些基本概念只是有一个简单的了解.当涉及到非父子组件之间通信时,选择了vuex.只是后来竟然发 ...
- vuex数据持久化插件--指定持久化特定的值
指定需要持久化的state,配置如下 import createPersistedState from "vuex-persistedstate" conststore = new ...
- vue render函数使用jsx语法 可以使用v-model语法 vuex实现数据持久化
render函数使用jsx语法: 安装插件 transform-vue-jsx 可以使用v-model语法安装插件 jsx-v-model .babelrc文件配置: vuex实现数据持久化 安装插 ...
- Vuex数据可视化
参考:https://gitee.com/hjm100/codes/46towe9v28a1bxfqhc7kl34 Vuex虽然能存储数据,但是一刷新就没有了,如果要实现数据持久化,就需要用vuex- ...
- Redis学习总结(1)——数据持久化
以前研究Redis的时候,很多东西都不太明白,理解得也不太深,现在有时间重新拾起来看看,将一些心得记录下来,希望和大家一起探讨. 一.简介 Redis是一个单线程高可用的Key-Value存储系统,和 ...
- iOS之数据持久化方案
概论 所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) ...
- Docker数据持久化与容器迁移
上节讲到当容器运行期间产生的数据是不会在写镜像里面的,重新用此镜像启动新的容器就会初始化镜像,会加一个全新的读写入层来保存数据.如果想做到数据持久化,Docker提供数据卷(Data volume)或 ...
- iOS 两行代码解决数据持久化
在实际的iOS开发中,有些时候涉及到将程序的状态保存下来,以便下一次恢复,或者是记录用户的一些喜好和用户的登录信息等等. 这就需要涉及到数据的持久化了,所谓数据持久化就是数据的本地保存,将数据从内存中 ...
- iOS的数据持久化
所谓的持久化,就是将数据保存到硬盘中,使得在应用程序或机器重启后可以继续访问之前保存的数据.在iOS开发中,有很多数据持久化的方案,接下来我将尝试着介绍一下5种方案: plist文件(属性列表) pr ...
随机推荐
- ubantu之Git使用
本文讲述在Ubuntu 14.04 x64环境下,如何安装Git,配置连接GitHub,并且上传本地代码到github. 一. 注册Git账户以及创建仓库 要想使用github第一步当然是注册gith ...
- 在Android中区分点击和滑动操作
转自:http://blog.csdn.net/do168/article/details/51587933 最近在写一个图片浏览安卓应用,想要弄成全屏显示,只在单击时显示工具栏和状态栏,在触摸滑动时 ...
- docker下将容器按照端口号分配
问题情境:现在有一个服务器主机,安装了docker,想给成员分配各自的容器,但不想成员通过宿主机进入容器.那么成员如何直接访问容器呢? 成员可以通过ip加端口号访问 因此,需要生成一个容器,将容器的2 ...
- LC-844
给定 s 和 t 两个字符串,当它们分别被输入到空白的文本编辑器后,如果两者相等,返回 true .# 代表退格字符. 注意:如果对空文本输入退格字符,文本继续为空. 示例 1: 输入:s = &qu ...
- zabbix使用自带模板监控MySQL
监控mysql不能直接使用zabbix自带模板,还需要到被监控的mysql客户端做配置. 1.在zabbix web配置步骤如下图: 2.配置完之后去看mysql主机监控项的时候看到mysql的监 ...
- openoffice将word转pdf中文乱码或消失的坑
将windows系统下的中文字体文件(C:\Windows\Fonts),放到/usr/share/fonts下,必须重启openoffice.
- C++五子棋(一)——开发环境
开发环境 环境准备 Visual Studio Windows EasyX图形库 素材文件 素材文件已经准备了,点击此处获取 百度网盘链接 提取码:su6p 创建项目 打开Visual Studio ...
- 6.Jenkins进阶之流水线pipeline语法入门学习(1)
目录一览: 0x00 前言简述 Pipeline 介绍 Pipeline 基础知识 Pipeline 扩展共享库 BlueOcean 介绍 0x01 Pipeline Syntax (0) Groov ...
- Java语言学习day28--8月03日
###10接口作为方法参数与返回值 * A: 接口作为方法参数 接口作为方法参数的情况是很常见的,经常会碰到.当遇到方法参数为接口类型时,那么该方法要传入一个接口实现类对象.如下代码演示. //接 ...
- 2021.08.03 BZOJ 疯狂的馒头(并查集)
2021.08.03 BZOJ 疯狂的馒头(并查集) 疯狂的馒头 - 题目 - 黑暗爆炸OJ (darkbzoj.tk) 重点: 1.并查集的神奇运用 2.离线化 题意: 给一个长为n的序列,进行m次 ...