vuex store 缓存存储原理分析

 更新时间:2022年07月27日 16:57:38   作者:Osborn521  
这篇文章主要介绍了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 实现复制功能,不需要任何结构内容直接复制方式

    Vue 实现复制功能,不需要任何结构内容直接复制方式

    今天小编就为大家分享一篇Vue 实现复制功能,不需要任何结构内容直接复制方式,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-11-11
  • Vue父子组件通讯的四种方法详解

    Vue父子组件通讯的四种方法详解

    父子组件通讯是指在前端开发的组件化架构中,父组件与子组件之间互相传递数据和触发功能的一种机制,这种机制使得组件能够保持独立性的同时,也能协同工作,本文给大家介绍了Vue父子组件通讯的四种方法,需要的朋友可以参考下
    2024-07-07
  • vue中虚拟DOM与Diff算法知识精讲

    vue中虚拟DOM与Diff算法知识精讲

    这篇文章主要为大家介绍了vue中虚拟DOM与Diff算法知识的图文精讲,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-04-04
  • 讲解vue-router之什么是嵌套路由

    讲解vue-router之什么是嵌套路由

    这篇文章主要介绍了讲解vue-router之什么是嵌套路由,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2018-05-05
  • vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    vue.js的双向数据绑定Object.defineProperty方法的神奇之处

    今天小编就为大家分享一篇关于vue.js的双向数据绑定Object.defineProperty方法的神奇之处,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2019-01-01
  • vue路由--网站导航功能详解

    vue路由--网站导航功能详解

    这篇文章主要介绍了vue路由--网站导航功能详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-03-03
  • 浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    浅析vue-cli3配置webpack-bundle-analyzer插件【推荐】

    小编最近为了优化vue项目性能,需要使用webpack-bundle-analyzer插件来分析报文件,在网上没有找到合适的,下面小编给大家写出来一个供大家参考
    2019-10-10
  • Vue中关于重新渲染组件的方法及总结

    Vue中关于重新渲染组件的方法及总结

    这篇文章主要介绍了Vue中关于重新渲染组件的方法及总结,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-12-12
  • Vue3+Vue Router实现动态路由导航的示例代码

    Vue3+Vue Router实现动态路由导航的示例代码

    随着单页面应用程序(SPA)的日益流行,前端开发逐渐向复杂且交互性强的方向发展,在这个过程中,Vue.js及其生态圈的工具(如Vue Router)为我们提供了强大的支持,本文将介绍如何在Vue 3中使用Vue Router实现动态路由导航,需要的朋友可以参考下
    2024-08-08
  • Vue中为什么不推荐用index做key详解

    Vue中为什么不推荐用index做key详解

    Vue中使用虚拟dom且根据diff算法进行新旧DOM对比,从而更新真实 dom,key是虚拟DOM对象的唯一标识,在diff算法中key起着极其重要的作用,下面这篇文章主要给大家介绍了关于Vue中为什么不推荐用index做key的相关资料,需要的朋友可以参考下
    2022-09-09

最新评论