zoukankan      html  css  js  c++  java
  • 利用vuex 做个简单的前端缓存

    利用vuex 做个简单的前端缓存

    vuex 使用vuex-persistedstate 做持久化存储时无法保存 map,这就尴尬了

    在javascript 中,object也是一种字典,object 的key 具有唯一性 使用object 存储也是可行的

    代码如下

    import Vue from 'vue'
    
    const state = {
      dictionary: {}
    }
    
    const mutations = {
      SET: (state, data) => {
        Vue.set(state.dictionary, data.cacheKey, data.cacheValue)
      },
      REMOVE: (state, data) => {
        Vue.delete(state.dictionary, data.cacheKey)
      },
      CLEAR: state => {
        state.dictionary = {}
      }
    }
    
    const actions = {
      get({ state }, data) {
        return state.dictionary[data]
      },
      set({ commit }, data) {
        commit('SET', data)
      },
      remove({ commit }, data) {
        commit('REMOVE', data)
      }
    }
    
    export default {
      namespaced: true,
      state,
      mutations,
      actions
    }
    
    

    使用

    获取缓存

          let cacheKey = `${this.wwa1}-${this.wwab1}`
    
          let value = await this.$store.dispatch('cache/get', cacheKey)
    

    存储

          await this.$store.dispatch('cache/set', {
            cacheKey: cacheKey,
            cacheValue: data
          })
    
  • 相关阅读:
    数据库
    用hosts管理IP和域名
    软件测试周期
    jdk安装、环境配置
    IntelliJ IDEA 下载、安装、破解及卸载
    Servlet线程
    servlet什么时候被实例化?【转】
    JSP转译成Servlet详细过程【转】
    电脑使用--快捷键等【转】
    api大全
  • 原文地址:https://www.cnblogs.com/WNpursue/p/14814264.html
Copyright © 2011-2022 走看看