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站一鍵三連哦！感謝支持！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/502756.html

標籤：其他

上一篇：js有了var為什么還要有let和const？

下一篇：vue+node跨域解決方案

Vue重繪頁面VueX中資料清空了，怎么重新獲取？

Vue重繪頁面VueX資料清空了，怎么重新獲取？