怎么在.vue中获取异步数据

Question

interface games: ListProp<
   ListProp<{
     teams: ListProp<GameProp>,
     loadeadTemid:string[]
   }>
 >
state：{
	games:{}
}
// mutation内初始化数据列表
      state.games[queryYear] = { ...state.games[queryYear] }
      state.games[queryYear][queryMonth] = { ...state.games[queryYear][queryMonth] }
      state.games[queryYear][queryMonth][teamId] = { ...state.games[queryYear][queryMonth][teamId] }

老师，我嵌套泛型俄罗斯套娃了，我的数据已经打平成对象了，但是初始化数据时我吐了, 不这样初始化就会报错
当时我做的思路是，做成日历的形式，根据日期，将数据插入日历中，数据结构为 games[年份][月份][队伍id]，获取到该队伍该月的赛程，将数据缓存下来。

getters: {
    getTeamSchedule: (state) => (teamid:string, year:number, month:number) => {
      if (state.games[year][month]) {
        return state.games[year][month][teamid]
      }
    }
  }
 我使用计算属性，调用state的过滤器，过滤数据，state.games[year]的值是undefined，所以一直在报无法从undefined上读取属性的错，这种我该怎么解决？
还有一点就是，我派发action进行异步调用时，无论是在onmounted中还是就是在setup中都是一样的报错，数据的确是放入了store.state中，但是我就是无法在.vue文件中取出。

Answer 1

linkscope 2021-01-06 10:21:19

如果你使用Vuex异步请求，光使用computed计算属性是不够的，因为Vuex存在延迟，也就是说你这边获取到了数据computed也不会即时更新。

常规做法是使用watch或者watchEffect监听你这个计算属性，从而达到异步数据接收，或者干脆直接在watchEffect里监听state变化。

• 提问者 见信 #1

  watch是监听某个东西的变化
  computed也是监听某个东西的变化，在这基础上还要重新计算出某个东西，watch也是可以做到这点的。
  从某种意义上来讲，两者很相似，都具备响应式能力。因此，在computed里是可以时时获取到最新的数据的，watch同样可以，我之前尝试过在watch里面修改computed的值，但是发现computed的值在watch里面是readonly，不可修改。
  两者同质化严重，但又有所区别。
  我做的很多页面的vuex的最新数据都是靠computed获取到的，因此computed是够用的。
  watch用的比较少，我用到的场景是，做了一个公共页面组件，几个页面样子相同，仅仅是数据不同，通过路由参数判断页面不同，当watch到路由参数发生改变，说明页面进行了切换，发送异步请求，获取当前页面所需的数据。从而实现一个模板套娃给几个页面，区别只是数据的不同

• linkscope 回复 提问者 见信 #2

  千万不要尝试修改computed，computed用于页面展示数据无疑是最佳的，但如果想在异步数据中处理某些数据，watch/watchEffect无疑是最好的选择，因为你不必担心computed可能会出现undefined的局面。
  我看你的意思好像是因为嵌套比较深导致异步获取数据后需要判断很多数据是否存在，你在watchEffect可以一步完成这种场景。详情可以见文档。

• linkscope 回复 提问者 见信 #3

  这两者本质都是监听，但两者有很明显的一个区别是：computed不存在副作用，而watch最大的功能就是它存在副作用。

点开查看后面1条评论

Answer 2

张轩 2021-01-05 19:39:30

同学你好 由于没有源代码 所以只能按照大体思路回答一下

第一个问题，你应该先判断 state.games[year] 是否存在，然后再判断 state.games[year][month] 是否存在。因为第一个数据结构在开始就是是 undefined 啊。

第二个问题 发送 action 的时候报了什么错误？不太清楚你说的无法取出是什么意思。请提供详细一点的错误信息哈

• 提问者 见信 #1

  老师，我的思路跟你说的一样。问题我也成功解决了，只是，为了做缓存这一块，我现在的代码，形成了一个金字塔状，类似回调地狱那样，很不舒服。真的就是层层判断年数据是否存在，月数据是否存在，队伍数据是否存在，丑极了