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>
效果图: