vue.js - 简单的 Vue 存储模式 - 初始服务器获取没有反应

Question

这个应用程序并不复杂。我正在尝试创建一个简单的商店(不热衷于使用 Vuex 来做这样的事情)，它应该协调服务器请求并确保整个应用程序有一个单一的事实来源。

store.js

import Vue from "vue"
import axios from "axios"

class Store {
  items = []

  constructor() {
    this.fetchData()
  }

  fetchData() {
    axios
      .get("/api/items")
      .then(response => this.fillFieldsFromServer(response.data))
  }

  fillFieldsFromServer(data) {
    // NONE OF THESE WORK

    // 1: this.items = data
    // 2: this.items = this.items.concat(data)
    // 3: Array.prototype.push.apply(this.items, data)
  }
}

export const itemStore = Vue.observable(new Store())

组件.vue

<template>
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</template>

<script>
  import { itemStore } from "../../stores/item-store.js"

  export default {
    computed: {
      items() {
        return itemStore.items
      },
    },
  }
</script>

显然我从根本上误解了这里的某些内容。

我认为会发生什么:

1. 商店单例已创建
2. 服务器请求被触发
3. Vue 使商店单例响应式
4. 组件呈现为空列表
5. 组件监视store.items
6. 服务器请求返回
7. 商店更新商品
8. 组件发现变化
9. 组件使用服务器数据重新渲染

但实际发生的是步骤 (8) 没有发生。服务器请求返回正常，但组件看不到更改，因此不会重新渲染。

显然我做错了什么。但什么？

Answer 1

Vue.observable 通过使用 get/set 访问器递归替换现有属性，使对象具有反应性，这样可以检测它们何时发生更改。至于数组，改变现有数组的 Array.prototype 方法也会被替换以跟踪它们的调用。

这不应该起作用，因为 Array.prototype.push.apply !== store.items.push:

Array.prototype.push.apply(this.items, data)

应该是:

  fillFieldsFromServer(data) {
    this.items = data;
  }

或者:

  fillFieldsFromServer(data) {
    this.items.push(...data);
  }

这是一个demo .