vue如何实现获取数据时, 再去加载数据?

Question

在vue中, 我需要获取一个字典, 如cityList, 如何做到在获取this.cityList时, 如果cityList没数据, 就去后台获取数据, 否则就返回已获取的数据?

// 类似与这样, cityList还能有双向绑定特性
computed:{
    cityList: {
        get () {
            if (cityList.length) return cityList
            return await getCityListService()
        }
    }
}

难点在如何保持citylist的双向绑定特性, 因为我直接使用proxy去替换get的话, 它的双向绑定也消失了!

Answer 1

这种需求仅靠computed实现不了，至少需要在data或另外的存储区上维护一个cityList

computed: {
  cityList() {
    if (this._cityList.length) return this._cityList;
    this.getCityListService();
  },
},
data() {
  return {
    _cityList: [],
  };
},
methods: {
  getCityListService() {
    // your code
  },
},

Answer 2

上面的做法也不行，因为没做同步处理

watch: {
  async cityList() {
    if (this._cityList.length) return this._cityList
    let { data } = await this.getCityListService()
    console.log(data, '返回的结果值')
  },
},
data() {
  return {
    _cityList: [],
  };
},
methods: {
  getCityListService() {
    // your code
    return new Promise((resolve, reject) => {
        // 接口处理返回
        
        // 比如
        axios({
            method:"POST",
            url:this.url,
            data:formData,
            headers: {
                'Content-Type': 'multipart/form-data'
            }
        }).then(response => {
            console.log('成功返回数据：', response)
            resolve(response)
        }).catch(error => {
            console.log('失败返回数据：', error)
            reject(error)
        })
        
    })
  },
},

1. 使得watch监听cityList值变化；
2. 再使用new Promise进行同步处理，然后使用resolve, reject，返回结果即可

Answer 3

这里的 cityList 需要借助另外一个对象完成，这个对象是用来存储请求到的数据，然后使用 computed 属性计算出 cityList即可。