vuex store 缓存存储原理分析

目录
  • vuex store 缓存存储原理
  • 如何使用store缓存数据
    • 1 src/store/index.js 写方法
    • 2 src/store/getter.js
    • 3 使用 store 存取数据

vuex store 缓存存储原理

vuex 的设计是将数据存在一个对象树的变量中，我们的应用（vue应用）从这个变量中取数据，然后供应用使用，当将当前页面关闭， vuex 中的变量会随着消失，重新打开页面的时候，需要重新生成。

而，浏览器缓存（cookie，localstorage等）是将数据存到浏览器的某个地方，关闭页面，不会自动清空这些数据，当再次打开这个页面时，还是能取到之前存在浏览器上的数据（cookie，localstorage等）。

要使用 vuex 还是使用浏览器缓存，要看具体的业务场景。比如：像用户校验的 token 就可以存在 cookie 中，因为用户再次登录的时候能用到。而像用户的权限数据，这些是有一定安全性考虑，且不同用户的权限不同，放在 vuex 中更合理，用户退出时，自动销毁。

其次，vuex 中的 state 是单向的，也可以异步操作，这两个没有冲突。

vuex 中的 state 的设计思路是保证数据的一致性和连续性，而让 state 中的值只能通过 action 来发起 commit，进而改变 state 中的值。

而，action 中是 同步 还是 异步，都是单向地改变 state 中的值。

如何使用store缓存数据

this.$store.commit('方法名',值)【存储】
this.$store.state.方法名【取值】

我使用的是 vue-element-admin

1 src/store/index.js 写方法

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
const modulesFiles = require.context('./modules', true, /\.js$/)
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
const store = new Vuex.Store({
  modules,
  getters,
  state: {               // SET_IMPORT 设置的这
    imports: []
  },
  mutations: {
    SET_IMPORT(state, routes) {      // 设置 SET_IMPORT方法，方法中设置存储某个值
      state.imports = routes
    }
  }
})
export default store

2 src/store/getter.js

const getters = {
  sidebar: state => state.app.sidebar,
  errorLogs: state => state.errorLog.logs,
  imports: state => state.imports    // 存储上面设置的 imports 字段
}
export default getters

3 使用 store 存取数据

const nullim = []
    var myMap = {}
    // 塞入键值对,当前上传文件
    myMap['filename'] = rawFile.name
    myMap['result'] = 0
    nullim.push(myMap)
this.$store.commit('SET_IMPORT', nullim)    // 存入缓存，调用 SET_IMPORT 方法
const old_imports = this.$store.getters.imports        // 取缓存中数据，通过字段名

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vuex之store拆分即多模块状态管理(modules)篇

    了解vuex的朋友都知道它是vue用来集中管理状态的容器,如果了解过Reduce的朋友可能看见他时就会非常熟悉,都是用来管理全局的状态的,实现不同组件之间相互的数据访问.这里我们不介绍vuex,主要介绍vuex拆分store以及多模块管理.我们知道如果一个项目非常大的话状态就会非常的多,如果不进行分类处理,所有的状态都维护在一个state里面的话,状态管理就会变得非常的混乱,这样非常不利于项目的后期维护.我们现在前端推崇模块化开发,为的就是提高开发效率和维护效率,避免重复工作.那么vuex是怎么

  • 详解vuex之store源码简单解析

    关于vuex的基础部分学习于https://www.jb51.net/article/163008.htm 使用Vuex的时候,通常会实例化Store类,然后传入一个对象,包括我们定义好的actions.getters.mutations.state等.store的构造函数: export class Store { constructor (options = {}) { // 若window内不存在vue,则重新定义Vue if (!Vue && typeof window !== '

  • 利用vuex-persistedstate将vuex本地存储实现

    目录 vuex-persistedstate将vuex本地存储 使用场景 Vuex-persistedstate API vuex的本地存储 vuex是什么 vuex中的五大核心 当然vuex的本地存储还有一种方式 vuex-persistedstate将vuex本地存储 使用场景 最近在做Vue项目中的登录模块,登陆成功后获取到token,将token存储在vuex中,然而我发现切换路由后vuex中的数据都恢复默认了,原来页面刷新之后vuex的数据都会恢复默认.而后面进行鉴权处理需要token

  • Vuex之理解Store的用法

    Vuex之理解Store的用法

    1.什么是Store? 上一篇文章说了,Vuex就是提供一个仓库,Store仓库里面放了很多对象.其中state就是数据源存放地,对应于与一般Vue对象里面的data(后面讲到的actions和mutations对应于methods). 在使用Vuex的时候通常会创建Store实例new Vuex.store({state,getters,mutations,actions})有很多子模块的时候还会使用到modules. 总结,Store类就是存储数据和管理数据方法的仓库,实现方式是将数据和方法

  • vuex store 缓存存储原理分析

    目录 vuex store 缓存存储原理 如何使用store缓存数据 1 src/store/index.js 写方法 2 src/store/getter.js 3 使用 store 存取数据 vuex store 缓存存储原理 vuex 的设计是将数据存在一个对象树的变量中,我们的应用(vue应用)从这个变量中取数据,然后供应用使用,当将当前页面关闭, vuex 中的变量会随着消失,重新打开页面的时候,需要重新生成. 而,浏览器缓存(cookie,localstorage等)是将数据存到浏览

  • redis缓存存储Session原理机制

    redis缓存存储Session原理机制

    目录 基于 Redis 存储 Session 首先安装 redis 存储引擎的包 设置session过期时间 分布式获取Session:(redis) 基于 Redis 存储 Session 如果我们想将 session 数据保存到 redis 中,只要将 session 的存储引擎改成 redis 即可. 使用 redis 作为存储引擎的例子: 首先安装 redis 存储引擎的包 go get github.com/gin-contrib/sessions/redis // 初始化基于 red

  • Mybatis的一级缓存和二级缓存原理分析与使用

    Mybatis的一级缓存和二级缓存原理分析与使用

    目录 Mybatis的一级缓存和二级缓存 1 Mybatis如何判断两次查询是完全相同的查询 2 二级缓存 2.1 二级缓存配置 2.2 二级缓存特点 2.3 配置二级缓存 2.4 测试 Mybatis的一级缓存和二级缓存 Mybatis会将相同查询条件的SQL语句的查询结果存储在内存或者某种缓存介质中,当下次遇到相同的SQL时不执行该SQL,而是直接从缓存中获取结果,减少服务器的压力,尤其是在查询越多.缓存命中率越高的情况下,使用缓存对性能的提高更明显. Mybatis缓存分为一级缓存和二级缓

  • Flutter图片缓存管理ImageCache原理分析

    目录 引言 PaintingBinding 减少图片缓存 增大阀值 思考 引言 设计: 嗯? 这个图片点击跳转进详情再返回图片怎么变白闪一下呢?产品: 是啊是啊! 一定是个bug开发: 囧囧囧 在开发过程中, 也许你也遇到过这样一个场景. 进入一个页面后,前一个页面的图片都会闪白一下. 或者在列表中,加载很多列表项后,之前列表中的图片都需要重新加载.你有没有想过这一切的原因是什么呢? 没错! 它就是我们今天介绍的主人公 --- ImageCache 可能有些人对ImageCache还有些陌生,

  • 关于Android的 DiskLruCache磁盘缓存机制原理

    关于Android的 DiskLruCache磁盘缓存机制原理

    目录 一.为什么用DiskLruCache 1.LruCache和DiskLruCache 2.为何使用DiskLruCache 二.DiskLruCache使用 1.添加依赖 2.创建DiskLruCache对象 3.添加 / 获取 缓存(一对一) 4.添加 / 获取 缓存(一对多) 三.源码分析 1.open() 2.rebuildJournal() 3.readJournal() 4.get() 5.validateKey 6.trimTOSize() 7.journalRebuildRe

  • java 中volatile和lock原理分析

    java 中volatile和lock原理分析 volatile和lock是Java中用于线程协同同步的两种机制. Volatile volatile是Java中的一个关键字,它的作用有 保证变量的可见性 防止重排序 保证64位变量(long,double)的原子性读写 volatile在Java语言规范中规定的是 The Java programming language allows threads to access shared variables (§17.1). As a rule,

  • PHP中常见的缓存技术实例分析

    本文实例分析了PHP中常见的缓存技术.分享给大家供大家参考.具体如下: JBLOG在开发的过程中,对性能的优化做了不少工作.为了尽量减少不必要的数据库查询,我对一些数据进行了缓存和静态化处理. 缓存的原理:把一些经常要用到但又很少改动的数据以数组或其它形式存储到一个独立的PHP文件中,然后在需要用到的时候包含进来. 缓存的优点:能够大大减少数据库的查询次数,减轻数据库的压力,提高程序的执行效率. JBLOG缓存的数据有:系统设置.博客分类.侧栏最新日志.最新评论.博客统计.日志归档.友情链接.标

  • Spring Cloud Hystrix入门和Hystrix命令原理分析

    断路由器模式 在分布式架构中,当某个服务单元发生故障之后,通过断路由器的故障监控(类似熔断保险丝),向调用方返回一个错误响应,而不是长时间的等待.这样就不会使得线程因调用故障服务被长时间占用不释放,避免了故障在分布式系统中的蔓延. Spring Cloud Hystrix针对上述问题实现了断路由器.线程隔离等一系列服务保护功能.它是基于Netflix Hystrix实现,该框架的目标在于通过控制那些访问远程系统.服务和第三方库的节点,从而对延迟和故障提供更强大的容错能力. Hystrix具备服务

  • vuex结合session存储数据解决页面刷新数据丢失问题

    vuex结合session存储数据解决页面刷新数据丢失问题

    目录 前言 一.原因: 二.解决思路: 1.本地存储方法: 2.实现步骤: 3.优化: 前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上. 在项目中是使用vuex保存数据,但是网页刷新后,store中保存的数据丢失了. 提示:以下是本篇文章正文内容,下面案例可供参考 一.原因: vuex作为全局的数据状态管理机制,store中的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里边的数据就会被重新赋值变成初始化状态. 二.解决思路: 将

  • Android AccessibilityService 事件分发原理分析总结

    Android AccessibilityService 事件分发原理分析总结

    目录 AccessibilityService 监听事件的调用逻辑 onAccessibilityEvent onIntercept AccessibilityService 事件的外部来源 AccessibilityServiceInfo AccessibilityManager AccessibilityManagerService AccessibilityServiceConnection 前言: 在了解了无障碍服务基础使用之后,我们来探究一下 AccessibilityService

随机推荐