javascript - When vue2.x uses vuex, when is the state data requested (or initialized)?

Question

Please tell me whether you usually request data from the backend at the entrance or the corresponding component. I feel that if you request data at the entrance, the number of requests at one time will be relatively large, but if you request data at the component, it feels like a repeated request.

Answer 1

Requesting data is generally under specific circumstances.
For example, when you enter the data list for the first time and need to load it, you should call it in created or mounted.

import { mapActions } from ’vuex‘
export default {
    methods: mapActions([’loadList‘]),
    mounted() {
        this.loadList() // 加载列表数据
    }
}

However, when querying or filtering the list, you need to call it in the event triggered by the button or component

<template>
    <p>
        <s-button @click='loadList'>搜索</s-button>
        <ul>
            <li v-for="item in list">{{ item.title }}</li>
        </li>
    </p>
</template>

import { mapActions } from ’vuex‘
import sButton from 'search-btn.vue'

export default {
    methods:{
        ...mapActions([’loadList‘]),
        search(keyword){ // 查询过滤列表数据
            this.loadList({keyword: keyword})
        }
    },
    mounted() {
        this.loadList() // 首次载入列表数据
    },
    components:{ sButton }
}