Vuex 的項目實例2 動態加載列表數據

1、在 public 目錄下新建 mock 文件夾夾，創建 list.json 文件：

[
  { "id": 0,
    "info": "Racing car sprays burnimg fuel into crowd.",
    "dome": false
  },
  { "id": 1,
    "info": "Japanese princess to wed commoner.",
    "dome": false
  },
  { "id": 2,
    "info": "Australian walks 100km after outback crash.",
    "dome": false
  },
  { "id": 3,
    "info": "Man charged over missing wedding girl.",
    "dome": false
  },
  { "id": 4,
    "info": "Los Angeles battles huge wildfires.",
    "dome": false
  }
]

2、把 Home.vue 文件中 data 里的 list 設為空數組。

3、在 store/index.js 文件中導入 axios，並通過 actions 發起異步請求：

import axios from 'axios'

export default new Vuex.Store({
  state: {
  },
  actions: {
    // 獲取數據列表
    getList(context) {
      axios.get('/mock/list.json').then(({ data }) => {
        console.log(data)
      })
    }
  }
})

4、回到 Home.vue 文件：

created() {
    // 這里的 dispatch 函數，專門用來觸發 actions
    this.$store.dispatch('getList')
}

這時刷新頁面就可以看到控制台，打印出了列表數據。

5、把數據掛載到 state 里面：

因為要通過觸發 Mutation 的方式間接變更數據，所以要新建個 mutations 函數：

mutations: {
    initList(state, list) {
      state.list = list
    }
},
actions: {
  // 獲取數據列表
    getList(context) {
      axios.get('/mock/list.json').then(({ data }) => {
        console.log(data)
        context.commit('initList', data)
      })
    }
}

6、回到 Home.vue 文件，去掉 data 里的 list 空數組，並修改代碼：

<a-list bordered :dataSource="$store.state.list" class="dt_list">
<script>
export default {
  data () {
    return {
    }
  },
  created() {
    // 這里的 dispatch 函數，專門用來觸發 actions
    this.$store.dispatch('getList')
  }
}
</script>

<!--或者-->
<a-list bordered :dataSource="list" class="dt_list">
<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
    }
  },
  created() {
    // 這里的 dispatch 函數，專門用來觸發 actions
    this.$store.dispatch('getList')
  },
  computed: {
    ...mapState(['list'])
  }
}
</script>

效果圖：