这篇文章主要介绍“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 中的值。
this.$store.commit('方法名',值)【存储】
this.$store.state.方法名【取值】
我使用的是 vue-element-admin
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
const getters = {
sidebar: state => state.app.sidebar,
errorLogs: state => state.errorLog.logs,
imports: state => state.imports // 存储上面设置的 imports 字段
}
export default getters
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 // 取缓存中数据,通过字段名
关于“vuex store缓存存储原理是什么”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识,可以关注亿速云行业资讯频道,小编每天都会为大家更新不同的知识点。
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。