vuex?store?緩存存儲(chǔ)原理分析
vuex store 緩存存儲(chǔ)原理
vuex 的設(shè)計(jì)是將數(shù)據(jù)存在一個(gè)對(duì)象樹的變量中，我們的應(yīng)用（vue應(yīng)用）從這個(gè)變量中取數(shù)據(jù)，然后供應(yīng)用使用，當(dāng)將當(dāng)前頁面關(guān)閉， vuex 中的變量會(huì)隨著消失，重新打開頁面的時(shí)候，需要重新生成。
而，瀏覽器緩存（cookie，localstorage等）是將數(shù)據(jù)存到瀏覽器的某個(gè)地方，關(guān)閉頁面，不會(huì)自動(dòng)清空這些數(shù)據(jù)，當(dāng)再次打開這個(gè)頁面時(shí)，還是能取到之前存在瀏覽器上的數(shù)據(jù)（cookie，localstorage等）。
要使用 vuex 還是使用瀏覽器緩存，要看具體的業(yè)務(wù)場景。比如：像用戶校驗(yàn)的 token 就可以存在 cookie 中，因?yàn)橛脩粼俅蔚卿浀臅r(shí)候能用到。而像用戶的權(quán)限數(shù)據(jù)，這些是有一定安全性考慮，且不同用戶的權(quán)限不同，放在 vuex 中更合理，用戶退出時(shí)，自動(dòng)銷毀。
其次，vuex 中的 state 是單向的，也可以異步操作，這兩個(gè)沒有沖突。
vuex 中的 state 的設(shè)計(jì)思路是保證數(shù)據(jù)的一致性和連續(xù)性，而讓 state 中的值只能通過 action 來發(fā)起 commit，進(jìn)而改變 state 中的值。
而，action 中是 同步 還是 異步，都是單向地改變 state 中的值。
如何使用store緩存數(shù)據(jù)
this.$store.commit('方法名',值)【存儲(chǔ)】
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 設(shè)置的這
? ? imports: []
? },
? mutations: {
? ? SET_IMPORT(state, routes) { ? ? ?// 設(shè)置 SET_IMPORT方法，方法中設(shè)置存儲(chǔ)某個(gè)值
? ? ? state.imports = routes
? ? }
? }
})
export default store2 src/store/getter.js
const getters = {
? sidebar: state => state.app.sidebar,
? errorLogs: state => state.errorLog.logs,
? imports: state => state.imports ? ?// 存儲(chǔ)上面設(shè)置的 imports 字段
}
export default getters3 使用 store 存取數(shù)據(jù)
const nullim = []
? ? var myMap = {}
? ? // 塞入鍵值對(duì),當(dāng)前上傳文件
? ? myMap['filename'] = rawFile.name
? ? myMap['result'] = 0
? ? nullim.push(myMap)
this.$store.commit('SET_IMPORT', nullim) ? ?// 存入緩存，調(diào)用 SET_IMPORT 方法
const old_imports = this.$store.getters.imports ? ? ? ?// 取緩存中數(shù)據(jù)，通過字段名以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了詳解VUE中v-bind的基本用法 ，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-07-07
基于webpack4+vue-cli3項(xiàng)目實(shí)現(xiàn)換膚功能
這篇文章主要介紹了基于webpack4+vue-cli3項(xiàng)目的換膚功能,文中是通過scss+style-loader/useable做換膚功能，本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-07-07
Vue resource三種請(qǐng)求格式和萬能測試地址
這篇文章主要介紹了Vue-resource三種請(qǐng)求格式和萬能測試地址,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了Vue組件通信的幾種實(shí)現(xiàn)方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
這篇文章主要介紹了vue element el-transfer增加拖拽功能，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-01-01
這篇文章主要介紹了vue制作一個(gè)toast組件npm包,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-10-10
本篇文章主要介紹了Vue的百度地圖插件嘗試使用，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-09-09
Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案
element ui官方封裝好的el-table組件,好用是挺好用的,但不可避免的是默認(rèn)的樣式,下面這篇文章主要給大家介紹了關(guān)于Element?UI/Plus中全局修改el-table默認(rèn)樣式的解決方案,需要的朋友可以參考下2023-02-02
vue大屏自適應(yīng)的實(shí)現(xiàn)方法(cv就能用)
最近在用VUE寫大屏頁面,遇到屏幕自適應(yīng)問題,下面這篇文章主要給大家介紹了關(guān)于vue大屏自適應(yīng)的實(shí)現(xiàn)方法,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-06-06
vue.js的computed,filter,get,set的用法及區(qū)別詳解
下面小編就為大家分享一篇vue.js的computed,filter,get,set的用法及區(qū)別詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-03-03