前端將所需資料儲存在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 如果商品分類的資料已經在本地的快...