vuex store 缓存存储原理分析
更新时间：2022年7月27日 23:43 点击：595 作者：Osborn521
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 // 取缓存中数据，通过字段名
以上为个人经验，希望能给大家一个参考，也希望大家多多支持猪先飞。
原文出处：https://blog.csdn.net/chinafire525/article/details/87166427
相关文章
- 这篇文章主要介绍了c#自带缓存使用方法,包括获取数据缓存、设置数据缓存、移除指定数据缓存等方法，需要的朋友可以参考下...2020-06-25
- 这篇文章主要介绍了Vue基于localStorage存储信息代码实例,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-11-16
- 这篇文章主要介绍了IDEA中的clean,清除项目缓存图文教程，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-09-25
- 这篇文章主要介绍了解决vue刷新页面以后丢失store的数据问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-08-12
- 这篇文章主要介绍了解决vuex数据页面刷新后初始化操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧...2020-07-26
- 这篇文章主要给大家介绍了关于iOS蓝牙设备名称缓存问题的解决方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧...2020-12-08
- 这篇文章主要介绍了AngularJS实现Model缓存的方式，分享了多种AngularJS实现Model缓存的方法，感兴趣的小伙伴们可以参考一下...2016-02-05
- 本文给大家一起探讨nodejs下dns的缓存问题，本文给大家介绍的非常详细，感兴趣的朋友一起看看吧...2016-11-22
- 这篇文章主要介绍了@CacheEvict + redis实现批量删除缓存方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教...2021-10-12
- 在本篇文章里小编给大家整理的是一篇关于python删除缓存文件方法，需要的朋友们可以学习下。...2020-07-19
- 参考：http://stackoverflow.com/questions/412341/how-should-i-store-guid-in-mysql-tables通常用UUID做唯一标识，需要在数据库中进行存储。UUID的格式 复制代码 代码如下: String string = UUID.randomUUID().toStrin...2015-03-15
- 这篇文章主要介绍了IIS7、iis7.5中禁止缓存单个静态文件的配置方法,需要的朋友可以参考下...2017-07-06
- 这篇文章主要介绍了vue项目中禁用浏览器缓存配置案例,本篇文章通过简要的案例,讲解了该项技术的了解与使用,以下就是详细内容,需要的朋友可以参考下...2021-09-12
- 页面不缓存可以让我们有更新就立即更新出来用户不需要清除浏览器缓存或不停的按f5刷新了，这里整理了解一些关于页面不缓存的方法，具体的如下。 一，js,css,图片文件不...2016-09-20
- 小编给大家带来一篇关于安卓手机缓存怎么清理的问题解答，有需要的可以参考一下   安卓手机怎么清理缓存 android清除程序缓存的方法  一，...2017-07-06
- 如果说是JQuery是手工作坊,那么Vue.js就像是一座工厂,虽然Vue.js做的任何事情JQuery都可以做,但无论是代码量还是流程规范性都是前者较优,下面这篇文章主要给大家介绍了关于Vue项目中如何运用vuex的相关资料,需要的朋友可以参考下...2021-09-29
SpringCache 分布式缓存的实现方法(规避redis解锁的问题)
这篇文章主要介绍了SpringCache 分布式缓存的实现方法(规避redis解锁的问题),本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下...2020-11-20- 这篇文章主要介绍了JS变量存储深拷贝和浅拷贝,想深入了解JS的同学，可以参考下...2021-05-04
- PHP缓存的方法有很多种，常用的有memcache, memcached。现在我们来学习一个php缓存集成库phpFastCache，就是开源的，只有一个简单的php文件，就可以支持包括apc, memcache, m...2016-11-25
详解AngularJS中$http缓存以及处理多个$http请求的方法
$http 是 AngularJS 中的一个核心服务，用于读取远程服务器的数据，通过本文给大家介绍AngularJS中$http缓存以及处理多个$http请求的方法，希望的朋友一起学习吧...2016-02-12