Vue SPA中获取Proxy代理对象而非目标数据的问题及解决

为什么会出现Proxy对象？ #

Vue的响应式系统会将组件data选项中的数据或者通过响应式API创建的数据包装成Proxy对象，目的是追踪数据变化，实现视图自动更新。你在首次请求后，把组件的响应式数据this.data（已经被Vue包装成Proxy）赋值给了store.myFetchedData，所以第二次从store读取时，拿到的就是这个被包装后的Proxy对象。

如何获取目标数据？ #

有两种常见的处理方式：

1. 存储原始API数据到store（推荐） #

在首次请求时，先保留API返回的原始未包装数据，再分别赋值给组件响应式数据和store，这样store里存的就是普通对象/数组：

async mounted() {
  if (store.myFetchedData) {
    this.data = store.myFetchedData;
  } else {
    // 先保存原始数据
    const rawData = await this.getDataFromApi()
    this.data = rawData;
    store.myFetchedData = rawData;    
  }
  console.log(this.data)
}

2. 从Proxy中提取原始数据 #

如果store里已经存了Proxy对象，可以用以下方法提取目标数据：

• 使用Vue提供的toRaw方法（需要导入），它能直接获取Proxy包装的原始数据：

import { toRaw } from 'vue'

async mounted() {
  if (store.myFetchedData) {
    // 提取原始数据
    this.data = toRaw(store.myFetchedData);
  } else {
    this.data = await this.getDataFromApi()
    store.myFetchedData = this.data;    
  }
  console.log(this.data)
}

• 若不想引入VueAPI，也可以通过JSON序列化再解析（注意：此方法不支持包含循环引用、函数、Date等特殊类型的数据）：

this.data = JSON.parse(JSON.stringify(store.myFetchedData))

内容的提问来源于stack exchange，提问作者Max Pattern