我的编程空间,编程开发者的网络收藏夹
学习永远不晚

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

短信预约 -IT技能 免费直播动态提醒
省份

北京

  • 北京
  • 上海
  • 天津
  • 重庆
  • 河北
  • 山东
  • 辽宁
  • 黑龙江
  • 吉林
  • 甘肃
  • 青海
  • 河南
  • 江苏
  • 湖北
  • 湖南
  • 江西
  • 浙江
  • 广东
  • 云南
  • 福建
  • 海南
  • 山西
  • 四川
  • 陕西
  • 贵州
  • 安徽
  • 广西
  • 内蒙
  • 西藏
  • 新疆
  • 宁夏
  • 兵团
手机号立即预约

请填写图片验证码后获取短信验证码

看不清楚,换张图片

免费获取短信验证码

vue实际运用之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中的变量不会变,其实就是自动存在本地存储中

在这里插入图片描述

总结

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

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

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

下载Word文档到电脑,方便收藏和打印~

下载Word文档

猜你喜欢

Android持久化技术之SharedPreferences存储实例详解

本文实例讲述了Android持久化技术之SharedPreferences存储。分享给大家供大家参考,具体如下: 1、SharedPreferences存储 在前面一篇文章《Android持久化技术之文件的读取与写入实例详解》中,我们介绍了
2022-06-06

Vue中状态管理器(vuex)详解以及实际应用场景

Vuex是一个专为Vue.js应用程序开发的状态管理模式,下面这篇文章主要给大家介绍了关于Vue中状态管理器(vuex)详解以及实际应用场景的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2022-11-16

Android持久化技术之文件的读取与写入实例详解

本文实例分析了Android持久化技术之文件的读取与写入操作。分享给大家供大家参考,具体如下: 1、文件存储 (1)在Android的持久化技术中,文件存储是最基本的一种数据存储方式。 (2)对存储的内容部做任何处理,原样存储到文件中。 (
2022-06-06

编程热搜

目录