SET_PERSISTENCE_DATE

src/store/getters.js

   roles: state => state.user.roles,
   visible: state => state.breadcrumb.visible,
   data: state => state.breadcrumb.data,
-  query: state => state.breadcrumb.query
+  query: state => state.breadcrumb.query,
+  p_date: state => state.breadcrumb.p_date
 }
 export default getters

src/store/modules/breadcrumb.js

         page: 1,
         ...JSON.parse(localStorage.getItem('query_4th'))
       }
-    }
+    },
+    p_date: [...JSON.parse(localStorage.getItem('date'))]
   },
   mutations: {
     SET_VISIBLE: (state, layer) => {
           state.query.fourLayer = { limit: 20, page: 1, ...option.query }
           break
       }
+    },
+    SET_PERSISTENCE_DATE: (state, date) => {
+      localStorage.setItem('date', JSON.stringify(date))
+      state.p_date = date
     }
   },
 
     },
     SetQuery({ commit }, option) {
       commit('SET_QUERY', option)
+    },
+    SetDate({ commit }, date) {
+      commit('SET_PERSISTENCE_DATE', date)
     }
   }
 }

src/views/room/gameHistory/index.vue

           <div class="block">
               <!-- <span class="demonstration">時間篩選</span> -->
               <el-date-picker
-              v-model="query.thirdLayer.date"
+              v-model="date"
               type="datetimerange"
               :picker-options="pickerOptions"
               range-separator="至"
           }
         }]
       },
-      // date: null,
+      date: [],
       dialogFormVisible: false
 
     }
   },
   created() {
+    this.date = this.p_date
     this.SetVisible(3)
     this.getList()
   },
     ...mapGetters([
       'visible',
       'data',
-      'query'
+      'query',
+      'p_date'
     ])
   },
   methods: {
     ...mapActions([
       'SetVisible',
       'SetData',
-      'SetQuery'
+      'SetQuery',
+      'SetDate'
     ]),
     getList() {
       this.listLoading = true
       console.log('Game detail')
     },
     handleFilter() {
-      if (this.query.thirdLayer.date) {
-        this.SetQuery({layer:3, query: {page: 1,startAt: moment.utc(this.query.thirdLayer.date[0]).format(), endAt: moment.utc(this.query.thirdLayer.date[1]).format()}})      
+      if (this.p_date) {
+        this.SetQuery({layer:3, query: {page: 1,startAt: moment.utc(this.p_date[0]).format(), endAt: moment.utc(this.p_date[1]).format()}})      
       } else {
          this.SetQuery({layer:3, query: {page: 1,startAt: null, endAt: null}})  
       }
       this.getList()
     },
     handleSizeChange(val) {
-      if (this.query.thirdLayer.date) {
-        this.SetQuery({layer:3, query: {limit: val, startAt: moment.utc(this.query.thirdLayer.date[0]).format(), endAt: moment.utc(this.query.thirdLayer.date[1]).format()}})      
+      if (this.p_date) {
+        this.SetQuery({layer:3, query: {limit: val, startAt: moment.utc(this.p_date[0]).format(), endAt: moment.utc(this.p_date[1]).format()}})      
       } else {
          this.SetQuery({layer:3, query: {limit: val,startAt: null, endAt: null}})  
       }
       this.getList()
     },
     handleCurrentChange(val) {
-      if (this.query.thirdLayer.date) {
-        this.SetQuery({layer:3, query: {page: val, startAt: moment.utc(this.query.thirdLayer.date[0]).format(), endAt: moment.utc(this.query.thirdLayer.date[1]).format()}})      
+      if (this.p_date) {
+        this.SetQuery({layer:3, query: {page: val, startAt: moment.utc(this.p_date[0]).format(), endAt: moment.utc(this.p_date[1]).format()}})      
       } else {
          this.SetQuery({layer:3, query: {page: val,startAt: null, endAt: null}})  
       }
   destroyed() {
     this.SetVisible(2)
   },
-  // TODO time 持九化
+  // time 持久化
   watch: {
-    'query.thirdLayer.date': function(val) {
-      if(this.query.thirdLayer.date) if((val[0] = this.query.thirdLayer.date[0]) && (val[1] = this.query.thirdLayer.date[1])) return
-      this.SetQuery({layer:3, query: {date: val}})
-      console.log('test', val);
+    'date': function(val) {
+     this.SetDate(val)
     }
   }
 }