同步存储读取vuex中store中的值
main.js
import store from "./store";
Vue.prototype.$store = store;
在
store中的index.js中
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
export default new Vuex.Store({
state: {
username: "",
},
// 同步 第一个形参 代表state
//name形参代表的是 你此时传递过来的参数
mutations: {
getTopClickMenuName: (state, name) => {
state.username = name; //赋值
},
},
actions: {},
modules: {},
});
A页面设置值
<van-button type="warning" @click="add">++</van-button>
<van-button type="danger">{{ $store.state.username }}</van-button>
methods: {
//调用函数,
add() {
this.$store.commit("getTopClickMenuName", this.$store.state.username + 1);
},
},
B页面获取值(第以种方式直接获取)
<h1>{{ $store.state.username }}--</h1>
第二种方式使用computed
<h1>{{ atoB }}--</h1>
computed: {
atoB() {
return this.$store.state.username;
},
},
我们发现在刷新页面的情况下。
store中的值,会丢失的。在刷新的时候,保留在本地
在app.vue中写
created() {
//在页面加载时读取sessionStorage里的状态信息
if (sessionStorage.getItem("username")) {
this.$store.replaceState(
Object.assign(
{},
this.$store.state,
JSON.parse(sessionStorage.getItem("username"))
)
);
}
//在页面刷新时将vuex里的信息保存到sessionStorage里
window.addEventListener("beforeunload", () => {
sessionStorage.setItem("username", JSON.stringify(this.$store.state));
});
},
总结一下beforeunload事件
当浏览器窗口关闭或者刷新时,会触发beforeunload事件。
window.addEventListener("beforeunload", () => {
console.log("当浏览器窗口关闭或者刷新时,会触发beforeunload事件");
});
遇见问题,这是你成长的机会,如果你能够解决,这就是收获。
作者:晚来南风晚相识
出处:https://www.cnblogs.com/IwishIcould/
本文版权归作者所有,欢迎转载,未经作者同意须保留此段声明,在文章页面明显位置给出原文连接
如果文中有什么错误,欢迎指出。以免更多的人被误导。
出处:https://www.cnblogs.com/IwishIcould/
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
如果觉得这篇文章对你有小小的帮助的话,记得在右下角点个“推荐”哦,或者关注博主,在此感谢!
万水千山总是情,打赏5毛买辣条行不行,所以如果你心情还比较高兴,也是可以扫码打赏博主(っ•̀ω•́)っ✎⁾⁾!
想问问题,打赏了卑微的博主,求求你备注一下的扣扣或者微信;这样我好联系你;(っ•̀ω•́)っ✎⁾⁾!
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_201214043958支付宝收款码.jpg?a=1607924145179)
支付宝
![](http://images.cnblogs.com/cnblogs_com/IwishIcould/1900124/t_20121604194271E6E296CCB71A007F4E22073D5EB64A.jpg)
微信
如果文中有什么错误,欢迎指出。以免更多的人被误导。