Vue刷新頁面VueX數據清空了，怎麼重新獲取？

點擊打開視頻講解更詳細

在vue中刷新頁面後，vuex中的數據就沒有了，這時我們要想使用就要重新獲取數據了，
怎麼在刷新後重新獲取數據呢？？？

這時我們就可以寫個公共的方法，在公共頁面（可以是根頁面）判斷store倉庫中數據是否為空，若為空的話，就可以重新請求介面，拉取數據。當然你也可以在每次使用數據前判斷是否為空，若為空就重新請求數據，這樣的話就時寫的代碼有的繁瑣了。

但這其實存在一個小bug，就是在根頁面我們拉取數據的時間段中，當前頁面中正好使用的有要拉取的數據，但現在數據還在請求，store中數據為空啊，所以我們就拿不到數據了，等到請求完數據，我們當前頁面也已經渲染完畢，所以數據還是拿不到的，這時我們就可以用watch監聽store中數據的變化，這樣的話，就不用怕拿不到數據了。

App.vue

<template>
  <div id="app">
    {{ getList }}
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'App',
  data(){
    return {
      
    } 
  },
  created(){
    
  },
  mounted() {
    this.getData()
    this.handerList()
  },
  watch:{
    // 方法一
    getList(){
      // this.handerList()   //監聽值變化後重新執行方法，獲取數據
    },
    // 方法二
    '$store.state.list'(newVal,oldVal){
      console.log(newVal,oldVal)    //監聽值變化後獲取數據
    }
  },
  computed:{
    getList(){
      return this.$store.state.list
    }
  },
  methods:{
    handerList(){
      console.log(this.getList)
      console.log(this.$store.state.list)
    },  
    getData(){
      //@vuecli 中用axios請求本地json
      axios.get('/menuList.json').then( res => {
        this.$store.commit('increment',res.data.list)
      })
    }
  }
}
</script>

<style scoped>


</style>

src\store\index.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    list : []
  },
  mutations: {
    increment (state,list) {
      state.list = list 
    }
  }
})

export default store;

若對您有幫助，請點擊跳轉到B站一鍵三連哦！感謝支持！！！