vuex和資料持久化

2021-10-10 12:50:25 字數 1722 閱讀 5823

前端將所需資料儲存在vuex中,但是vuex中資料在重新整理後會被清空,

而資料持久化,就是在執行瀏覽器重新整理操作時,將vuex中的資料轉存在本地localstorge中,

在重新整理時先去local中取,取到之後渲染到頁面,

再將資料轉存到vuex中,清空localstorge,也就實現了資料的持久化

vuex中

1.store/index.js

import vue from "vue";

import vuex from "vuex";

import modules from "./modules";

import getters from "./getters";

import createpersistedstate from "vuex-persistedstate";

vue.use(vuex);

const createpersisted = createpersistedstate(;

}});const store = new vuex.store(,

getters,

strict: process.env.node_env !== "production",

plugins: [createpersisted]

});export default store;

2.store/modules/index.js

const files = require.context('.', true, /\.module.js$/);

let modules = {};

files.keys().foreach((key) => ;

} modules[key.replace(/(\.\/|\.module.js)/g, '')] = object.assign(

temp,

files(key).default

);});console.log(modules,'modules');

export default modules;

3.store/modules/datacache.modules.js

const datacache = 

},mutations: else }}

};export default datacache;

store/modules/home.modules.js

const home = ,

mutations:

},actions: , data) }};

export default home;

安裝: npm i -s vuex-persistedstate

配置使用:

import createpersistedstate from "vuex-persistedstate";
const createpersisted = createpersistedstate(;

}});

VueX資料持久化

解決 vue重新整理時獲取不到資料 解決方案 1.本地儲存 2.vuex資料持久化工具外掛程式 import vue from vue import vuex from vuex vue.use vuex export default new vuex.store mutations 元件中使用 加...

vuex資料狀態持久化

vuex可以進行全域性的狀態管理,但重新整理後重新整理後資料會消失,這是我們不願意看到的。怎麼解決呢,我們可以結合本地儲存做到資料持久化,也可以通過外掛程式 vuex persistedstate。1通過 vuex persistedstate這個外掛程式,來實現將資料儲存到本地 npm insta...

vuex的持久化資料

1.為什麼需要將vuex資料進行持久化?1 商品分類頁資料資訊是否經常會發生變化?答案是否定的 2 對於不經常發生變化的資料,是否還需要浪費資源進行請求?答案是否定的 3 當前操作將產品加入到購物車,是否希望下次再開啟的時候購物車資訊已經是被清除了?答案是否定的 4 如果商品分類的資料已經在本地的快...