vuex 如何做到 只有组件用到某个数据，才去发送请求？

Question

比如 vuex 中有一个城市列表

{
  cityList:[]
}

这个列表的数据是从后台返回的，常规做法是在整个页面第一次加载的时候发送请求，然后commit保存到vuex中。但是页面第一次初始化的时候，是没有用到这个数据的，所以我想问一下有没有方法能够让组件在真正使用到这个数据的时候，发现这个数据是空才去加载，而不是页面初始化的时候就去加载。
我知道可以在使用这个组件的时候用watch 监听 cityList，如果 cityList 为空才去发送请求，但是这样子有一个缺点，假如我有好多个组件都需要使用这个cityList，那我每一个组件都要监听一次 cityList 然后判断是否为空才去发送请求？

Answer 1

// initial state
const state = {
  cityList: [],
}

// getters
const getters = {

}

let loading = false;

// actions
const actions = {
  async LoadCitys(store) {
    const cityList = store.state.cityList;
    if (loading || cityList.length > 0) return cityList;

    loading = true;

    return new Promise(resolve => {
      setTimeout(() => {
        store.commit('SET_CITY_LIST', [1, 2, 3]);
        loading = false;
        resolve(store.state.cityList);
      }, 1e3);
    });
  },
}

// mutations
let mutations = {}

mutations['SET_CITY_LIST'] = function (state, r) {
  state.cityList = r
}

export default {
  state,
  getters,
  actions,
  mutations
}

---

<template>
  <div>
    cityList: {{ cityList }}
  </div>
</template>

<script>
  export default {
    computed: {
      cityList() {
        return this.$store.state.citys.cityList;
      }
    },
    created() {
      this.$store.dispatch('LoadCitys');
    },
  }
</script>

Answer 2

在需要用到的组件中：

import { mapState, mapActions } from 'vuex'

export default {
  computed: {
    ...mapState(['cityList'])
  },
  mounted () {
    if (!this.cityList || this.cityList.length === 0) {
      this.getCityList()
    }
  },
  methods: {
    ...mapActions(['getCityList'])
  }
}