需求
不同页面跳转保存切换后的时间
把时间保存在vuex里面共享
如果不这样写的话,a页面切换选择的时间
然后跳到b页面 b页面返回a页面时间还会显示最初默认的时间 不会显示
切换后的时间值
a页面切换时间跳b页面 b页面返回a页面
保存a页面切换后的时间
这个是基于elem框架
a页面
!<template>
<div>
<div>
<div class="block">
<el-date-picker
v-model="value1"
type="month"
@change="btnswitchover"
placeholder="选择日期">
</el-date-picker>
<button @click="btnskip">跳转</button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return{
value1: '2021-12',
listTime:"",
}
},
created(){
// 在初始化接收 state的值相当于data的值
this.value1 = this.$store.state.currDbSource1;//这个取vuex存的state的值
this.listTime = this.$store.state.currDbSource;//这个取vuex存的state的值
},
methods:{
// a页面切换时间-b页面 b页面返回保存a页面切换的状态
btnswitchover(e){
//把切换的时间赋值给这个
this.$store.commit('saveCurr1',this.dayjs(this.value1).format("YYYY-MM"));//存在vuex
this.listTime=this.dayjs(e).format("YYYY-MM")
this.$store.commit('saveCurr',this.listTime);//存在vuex
},
btnskip(){
this.$router.push({
path: "/503",//这里503相当于b页面
query: {
},
});
}
},
mounted(){
}
}
</script>
<style>
</style>
b页面
!<template>
<div>
<button @click="btnReturn">返回403</button>
</div>
</template>
<script>
export default {
data(){
return{
}
},
methods:{
btnReturn(){
this.$router.push({
path: "/403",//相当于a页面
query: {
},
});
},
}
}
</script>
<style>
</style>
vuex页面
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
state: {
//相当于data
currDbSource1: '2021-12',//value1
currDbSource:"",//listTime
},
mutations: {
saveCurr1(state,currDbSource1){
state.currDbSource1 = currDbSource1;
},
saveCurr(state,currDbSource){
state.currDbSource = currDbSource;
},
},
actions: {
},
modules: {
},
getters:{
}
})