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中的变量不会变,其实就是自动存在本地存储中
总结
本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注我们的更多内容!
相关推荐
-
vuex实现数据状态持久化
用过vuex的肯定会有这样一个痛点,就是刷新以后vuex里面存储的state就会被浏览器释放掉,因为我们的state都是存储在内存中的. 所以我们通过 vuex-persistedstate这个插件,来实现将数据存储到本地 用法很简单 1. npm install vuex-persistedstate 2. import createPersistedState from 'vuex-persistedstate' const store = new Vuex.Store({ modules:
-
Vuex数据持久化实现的思路与代码
什么是vuex vuex :是一个专为vue.js开发的状态管理器,采用集中式存储的所有组件状态 五个属性: state.getters.mutations.actions.module 基本使用: 新建store.js文件,最后在main.js中引入,并挂载到实列上 import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex) const state = {} const getters = {} const mutations = {
-
vuex数据持久化的两种实现方案
目录 业务需求: 方案一:vuex-persistedstate 方案二:vuex-persist 总结 业务需求: 在基于vue开发SPA项目时,为了解决页面刷新后数据丢失的问题,我们一般都是将数据存储在localstorage或sessionstorage中:当数据需要全局处理统一管理时,我们也会借助于vue官方提供的vuex来进行数据的统一管理.vuex相比localstorage或sessionstorage来说,存储数据更安全些.与此同时,vuex也存在一些弊端,当页面刷新后,vuex
-
VUEX 数据持久化,刷新后重新获取的例子
VUEX 数据持久化 // store.js getters: { userInfo(state) { console.log('getters',state); if (!state.userInfo.id) { let token = getStorage("token"); console.log('token',token); if (token) { let userInfo = getStorage("userInfo"); state.userInfo
-
如何实现一个简易版的vuex持久化工具
背景 最近用uni-app开发小程序项目时,部分需要持久化的内容没法像其他vuex中的state那样调用,所以想着自己实现一下类似vuex-persistedstate插件的功能,貌似代码量也不会很大 初步思路 首先想到的实现方式自然是vue的watcher模式.对需要持久化的内容进行劫持,当内容改变时,执行持久化的方法. 先弄个dep和observer,直接observer需要持久化的state,并传入get和set时的回调: function dep(obj, key, options) {
-
vuex 第三方包实现数据持久化的方法
目的: 让在vuex中管理的状态数据同时存储在本地.可免去自己存储的环节. 在开发的过程中,像用户信息(名字,头像,token)需要vuex中存储且需要本地存储. 如果有别的模块也需要持久化,也存储在本地 1)首先:我们需要安装一个vuex的插件vuex-persistedstate来支持vuex的状态持久化. npm i vuex-persistedstate 2)然后:在src/store 文件夹下新建 modules 文件,在 modules 下新建 user.js 和 cart.js
-
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-persisteds
-
Pinia简单使用以及数据持久化详解
目录 基本介绍 基本使用与state actions的使用 getters的使用 storeToRefs的使用 pinia模块化 pinia数据持久化 用法 常见疑问 进阶用法 总结 基本介绍 Pinia 是 Vue.js 的轻量级状态管理库 官方网站:pinia.vuejs.org/ pinia和vuex4一样,也是vue官方的状态管理工具(作者是 Vue 核心团队成员) pinia相比vuex4,对于vue3的兼容性更好 pinia相比vuex4,具备完善的类型推荐 pinia同样支持vue
-
vue实现简单表格组件实例详解
本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩
-
Vue的实例、生命周期与Vue脚手架(vue-cli)实例详解
一.Vue的实例 1.1.创建一个 Vue 的实例 每个 Vue 应用都是通过 Vue 函数创建一个新的 Vue 实例开始的: var vm = new Vue({// 选项}) 虽然没有完全遵循 MVVM 模型,Vue 的设计无疑受到了它的启发.因此在文档中经常会使用 vm (ViewModel 的简称) 这个变量名表示 Vue 实例. 1.vue.js就是一个构造器,通过构造器Vue来实例化一个对象:例如:var vm = new Vue({}); 2.实例化Vue时,需要传入一个参数(选项
-
vue通信方式EventBus的实现代码详解
vue通信方式有很多,项目中用的比较多的的有 pros.vuex.$emit/$on 这3种,还有 provide/inject (适合高阶组件). $attrs和$listeners (适合高阶组件)以及 $parent/$child/ref.eventBus 等这3种方式.很多时候我们都是只会使用api,而懂得原理以及实现,但我就觉得懂得原理以及实现跟一个只会调用api的开发人员时不在同一层次的.所以这里就像把跨组件通信的 eventBus 通信的原理给大家展示一下.这也是自己学到大佬的的东
-
发布订阅模式在vue中的实际运用实例详解
订阅发布模式定义了一种一对多的依赖关系,让多个订阅者对象同时监听某一个主题对象.这个主题对象在自身状态变化时,会通知所有订阅者对象,使它们能够自动更新自己的状态. 比如addEventListener 这个api就是个发布订阅模式 如果用过vue的同学,可以把他类比于 watch 下面我们看一个例子 var observe={ fnsObj:{}, // 订阅方法 on:function(key,fn){ if(!observe.fnsObj[key]){ observe.fnsObj[key]
-
Vue 中使用 typescript的方法详解
什么是typescript typescript 为 javaScript的超集,这意味着它支持所有都JavaScript都语法.它很像JavaScript都强类型版本,除此之外,它还有一些扩展的语法,如interface/module等. typescript 在编译期会去掉类型和特有语法,生成纯粹的JavaScript. Typescript 5年内的热度随时间变化的趋势,整体呈现一个上升的趋势.也说明ts越来越️受大家的关注了. 安装typescript npm install -g ty
-
vue keepAlive缓存清除问题案例详解
vue项目中经常会用到keepalive来做缓存,在应付基本要求上可以说非常方便.但是遇到同一个页面,根据条件不同,分别缓存或者不缓存,就有些麻烦了. 首先先把坑列出来: 1. <keep-alive v-if="xxx"> <router-view /> </keep-alive> <keep-alive v-else> <router-view /> </keep-alive> 网上很多都是这种方法,用了这种方
-
vue前端开发辅助函数状态管理详解示例
目录 mapState mapGetters mapMutations mapActions 示例 小结 mapState 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余.为了解决这个问题,我们可以使用 mapState 辅助函数帮助我们生成计算属性.不使用mapState时,获取对象状态,通常放在使用组件的computes属性中,使用方式为: //.... computed: { count: function(){ return this.$store.state
-
Vue组件之间四种通信方式详解
目录 前言 父子组件通信 父组件与子孙组件的通信 父组件获取子组件数据 无需考虑组件关系的通信 前言 vue 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改
随机推荐
- vuejs2.0子组件改变父组件的数据实例
- 拒绝黑客之网络安全三部曲
- java实现zip,gzip,7z,zlib格式的压缩打包
- vbs 注册表操作类代码
- 解决javaWEB中前后台中文乱码问题的3种方法
- PHP 过滤页面中的BOM(实现代码)
- Centos虚拟机上网配置IP方法
- 使用python实现扫描端口示例
- c#使用file.copy实现文件备份示例
- DIV+CSS经常用到的属性、参数及说明
- 基于JavaScript实现随机颜色输入框
- MySQL数据库常用操作和技巧(DBA必备知识)
- C语言 位域详解及示例代码
- Python实现的异步代理爬虫及代理池
- PHP容易被忽略而出错陷阱 数字与字符串比较
- 复杂检索数据并分页显示的处理方法
- php array_keys 返回数组的键名
- 详解webpack require.ensure与require AMD的区别
- 详解python中的线程
- Oracle查询当前的crs/has自启动状态实例教程