vuex 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 // 取缓存中数据,通过字段名
以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。
相关文章
vue.js的双向数据绑定Object.defineProperty方法的神奇之处
今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧2019-01-01浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】
小编最近为了优化vue项目性能,需要使用webpack-bundle-analyzer插件来分析报文件,在网上没有找到合适的,下面小编给大家写出来一个供大家参考2019-10-10
最新评论