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中的变量不会变，其实就是自动存在本地存储中

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

赞 (0)

相关推荐

  • vuex数据持久化的两种实现方案

    目录 业务需求: 方案一:vuex-persistedstate 方案二:vuex-persist 总结 业务需求: 在基于vue开发SPA项目时,为了解决页面刷新后数据丢失的问题,我们一般都是将数据存储在localstorage或sessionstorage中:当数据需要全局处理统一管理时,我们也会借助于vue官方提供的vuex来进行数据的统一管理.vuex相比localstorage或sessionstorage来说,存储数据更安全些.与此同时,vuex也存在一些弊端,当页面刷新后,vuex

  • 如何实现一个简易版的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

  • 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实现数据状态持久化

    用过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 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 = {

  • vue实际运用之vuex持久化详解

    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实现简单表格组件实例详解

    vue实现简单表格组件实例详解

    本来想这一周做一个关于vuex的总结的,但是由于朋友反应说还不知道如何用vue去写一个组件,所以在此写写一篇文章来说明下如何去写vue页面或者组件.vue的核心思想就是组件,什么是组件呢?按照我的理解组件就是装配页面的零件,比如一辆车有大大小小许多零件组成,那么同样的一个页面,也是有许多组件构成的比如说头部组件 按钮组件等等,vue三大核心组件 路由 状态管理,路由控制页面的渲染,页面由组件组成,数据有vuex进行管理和改变.下面我会以一个简单的案例来说 第一步:构建一个简单的vue项目,老规矩

  • Vue的实例、生命周期与Vue脚手架（vue-cli）实例详解

    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缓存清除问题案例详解

    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 框架提供了前端开发组件的思想,可以通过组件来组合成一个完整的页面,都是随着组件数量原来越多,组件之间难免需要相互通信,那么如何实现组件之间的通信呢?下面介绍 vue 组件通信的几种方法 父子组件通信​ 父组件传递 props 给子组件(数据以及改变数据的方法),子组件通过 $emit 来更新父组件的状态 父组件定义,声明状态 { name: 'baidu.com' } 以及可以改

随机推荐