Vuex里保存从后端获取的全局数据，按需加载要怎么做？

Question

我们后端给出了一些接口，用于获取全局共享的数据，比如状态集合：

[
    {
        label: '待发货',
        status: 1
    },
    {
        label: '已发货',
        status: 2
    }
]

我想在vuex中保存这些数据，但是为了节约性能，我要在用到的时候才调接口获取。

我想过在需要这些数据的时候做判断，如果数据是空的就dispatch一个action去获取数据，但是如果每个页面都需要这个数据，每个页面都要判断一下，并且dispatch，就会有很多冗余代码。

遂请教一下大伙有没有更好的解决方案？

Answer 1

我这边也有这种使用场景；我目前的做法是每个用到的地方都dispatch一下。因为我没没找到更加方便的写法。

store:

export default {
  namespaced: true,
  state:{
    platformList:[]
  },
  mutations: {
    setPlatformList(state, list) {
      state.platformList = list
    }
  },
  actions: {
    getPlatformList({ commit, state }){
      return new Promise((resolve, reject) => {
        if(state.platformList.length){
          resolve(state.platformList.length)
          return
        }
        api.get("platform/list").then(({data}) => {
          commit('setPlatformList',data)
          resolve(data)
        }).catch(reject)
      })
    }
  }
}

然后在使用的vue文件中：

mounted() {
  this.$store.dispatch("platform/getPlatformList");
}