Vue.js 计算属性需要等待异步数据

在设置数据之前，计算属性需要等待从服务器获取项目。正确的方法是什么

我试过这个：

export default {
  data() {
    return {
      projects: []
    }
  },
  mounted() {
    axios.get('...')
         .then(({ data } => this.projects = data)
  },
  computed: {
    personalProjects() {
          return this.projects.filter(...)
      },

      commercialProjects() {
          return this.projects.filter(...)
      }
  }
}

但我收到一条错误消息：

计算属性“personalProjects”已分配给，但它没有setter。

---

我是否应该在

data（）

中设置

personalProjects

和

commercialProjects

。计算属性是反应性、派生属性。只要数据请求更新了

projects

，它们就会响应性地更新

本质上，组件的逻辑从没有项目开始，

[]

，如果有人要求个人或商业项目，他们会得到正确的结果：没有任何一个，

[]

---

但是，无论何时安装组件，它都会启动加载实际项目的过程，无论何时完成，

projects

的整个依赖关系图将进行反应性更新，这意味着

personalProjects

将提供正确的结果。

您可以使用计算属性或带有数据属性的手表，但不能同时使用这两个属性，并且它们在最终结果中相当等效。您的计算属性的实际问题是什么？您不能等到ajax请求完成后再依赖它们的值吗？您现在所拥有的似乎是正确的。考虑一下，你当前加载的项目中有多少是“个人”项目。在初始加载时，没有项目，因此空数组是正确的。只要请求后

projects

发生更改，这两个计算属性都将进行反应性更新。@zero298谢谢。您的回复让我意识到，最初我将“projects”设置为空字符串。我改为空数组。现在它工作得很好！啊，那就别想我的答案了。你已经采取了正确的方法。

watch: {
      projects() {
          this.personalProjects = this.projects.filter(project => project.type === 'personal')
          this.commercialProjects = this.projects.filter(project => project.type === 'commercial')
      }
  },