//==========存储在vuex内的数据,进行调用的时候============
//vuex内部代码写法
state:{
name:"旧值"
},
mutations:{
函数1(state){ //1.定义一个函数进行对state.name值的更改
state.name="新值";
window.localStorage.setItem("name",JSON.stringify(新值)); //2.更改的时候存入本地
},
函数2(state,status){ //4.函数2 接受形参names从新对state.name进行赋值
state.name=status;
}
},
actions:{
函数3({ commit }){ //commit是在axios里面会接收一个ctx,ctx里面解构出来commit
let names=JSON.parse(localStorage.getItem("name"));
commit('函数2',names); //3.把获取到本地的值,传入给函数2
}
}
//vue文件内代码写法
<h1>{ $store.state.name }</h1>
methods:{
函数(){
this.$store.commit('函数1') //这里的函数是vuex内的函数1调用
//commit:同步操作,写法:this.$store.commit('mutations方法名',值)
}
}
},
mounted(){
this.$store.dispatch('函数3') //4.这里是调用的vuex里面的函数2
//dispatch:含有异步操作,例如向后台提交数据,写法: this.$store.dispatch('action方法名',值)
---------------------------
这样一来无论如何刷新值都存在
vuex数据持久化写法
最新推荐文章于 2024-03-22 09:00:29 发布