vue实际运用之vuex持久化详解
作者:GG·bond 发布时间:2024-05-09 15:15:50
标签:vue,vuex,持久化
目录
vuex持久化
总结
vuex持久化
vuex:刷新浏览器,vuex中的state会重新变为初始状态
解决办法:
使用vuex-persistedstate插件 (实际就是自动存在本地存储中)
安装
npm i -S vuex-persistedstate
引入及配置:在store下的index.js中
import Vue from 'vue'
import Vuex from 'vuex'
//引入
import persistedState from 'vuex-persistedstate'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
num: null,
name: null
},
mutations: {
getNum(state, val) {
state.num = val
},
getName(state, val) {
state.name = val
}
},
//配置
plugins: [
persistedState({
//默认使用localStorage来固化数据,也可使用sessionStorage,配置一样
storage: window.localStorage,
reducer(val) {
return {
// 只储存state中的值
num: val.num,
name: val.name
}
}
})
]
})
我在Home组件中给vuex中的state中变量赋值
created(){
this.$store.commit('getNum',3)
this.$store.commit('getName','胡歌')
},
在H组件中引用
<template>
<div>
{{$store.state.num}}
{{$store.state.name}}
</div>
</template>
这样刷新H组件,$store.state中的变量不会变,其实就是自动存在本地存储中
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注asp之家的更多内容!
来源:https://blog.csdn.net/GTbond/article/details/122097410
0
投稿
猜你喜欢
- 解决中文乱码问题项目地址 github: https://github.com/Delgan/loguru文档:https://loguru
- 如下所示:import cv2import numpy as npbins = np.arange(256).reshape(256,1)d
- 最近开发了一个网站,大量采用了html5和css3,希望用户都以webkit内核打开页面,但是测试却发现360的以ie内核打开为推荐模式,不
- 一、前言python的两个单元测试包分别是 doctest 和 unittest,这两个包的使用起来各有长处,适用于不同的场景doctest
- 1. floor 函数1.1 floor 函数的作用floor() 函数的作用是返回小于等于该值的最大整数举例说明:select floor
- 使用type()查看数据的类型在Python中, 可以使用type()类型来查看数据的类型:>>> type(3)<
- 本文实例讲述了Python实现将n个点均匀地分布在球面上的方法。分享给大家供大家参考。具体分析如下:最近工作上遇到一个需求,将10000左右
- ACCESS2000文件用ACCESS2007打开,并迁移到SQLSERVER2005里 打开ACCESS2007的数据库工具方法
- 虽然这种情况不应该发生,通常像我们关系型数据库,我们应该是事先设计好,以后不能改动,但是由于之前工作的疏忽,其实说实话,也不仅仅是我个人的疏
- struts2.3.24 + spring4.1.6 + hibernate4.3.11+ mysql5.5.25开发环境搭建及相关说明。
- 不知大家对精华区的表格排序终极优化是否还有记忆,当时讨论的结果曾以为是最快的JS排序了,实则不然,按前段时间我发的DHTML性能提升帖(转译
- 前言:本篇博客继续学习BeautifulSoup,目标站点选取“溧阳摄影圈”,这一地方论坛。目标站点
- 【添加事件机制】 addEventListener 和 attachEvent[W3C]addEvent
- python 类详解类1.类是一种数据结构,可用于创建实例。(一般情况下,类封装了数据和可用于该数据的方法)2.Python类是可调用的对象
- 目录赋值语句直接赋值:增量赋值: 链式赋值: 多重赋值:语法糖:基本输入:input()函数:eval()函数:&nbs
- python 3.x 环境下,使用h5py加载HDF5文件,查看keys,如下:>>> import h5py>&g
- 切片主要用于序列对象中,按照索引区间截取出一段索引的内容。切片的书写形式:[i : i+n : m] ;其中,i 是切片的起始索引值,为列表
- 功能很简单,代码也很简洁,这里就不多废话了。package mainimport ( "fmt
- 最近在做学院的选课系统时,在分页上被卡壳了一下,因为需要用到排序,所以不能像以前一样用一个自动递增的字段作为主键,然后仅仅是对这个主键来做统
- 【OpenCV】⚠️高手勿入! 半小时学会基本操作 ⚠️ 对象测量概述OpenCV 是一个跨平台的计算机视觉库, 支持多语言, 功能强大.