vuex store 緩存存儲原理分析

Posted on 2022-07-27 by WalkonNet

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        // 取緩存中數據，通過字段名

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

vuex store 緩存存儲原理分析

目錄