您现在的位置是：网站首页> 编程资料编程资料

vuex store 缓存存储原理分析_vue.js_

2023-05-24 425人已围观

简介 vuex store 缓存存储原理分析_vue.js_

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对象添加属性(key:value)、显示和删除属性方式_vue.js_

下一篇：微信小程序转盘抽奖的实现方法_javascript技巧_

相关内容

点击排行

本栏推荐

猜你喜欢

-六神源码网