1

我有一个苗条的商店，我在变量命名的任务中保存了一些虚拟数据。我还使用 Axios 在商店内使用 API 获取新数据。然后将新数据推送到任务变量中。可以在组件中读取正确的数据，但来自 api 的数据不会呈现。


import { writable } from "svelte/store";
import config from "../../config";
import axios from "axios";

let tasks = [
  {
    // this is what api fetches.
    id: 500,
    name: "task 500",
    status: 0,
  },
];

axios
  .get(config.API_URL + "task")
  .then(function (response) {
    response.data.tasks.forEach((task) => {
      tasks.push(task);
      tasks = tasks;
    });
  })
  .catch(function (error) {
    console.log("something went wrong");
  });

// console.log(tasks);

const Tasks = writable(tasks);

export default Tasks;

我需要以某种方式使用自动或手动重新呈现组件中的任务列表。或任何其他可能的方式。组件中的任务数据记录正常，但组件视图未更新。

4

1 回答 1

0

问题是您在tasks商店实际运行时正在更新Tasks（它是用您的虚拟数据初始化的。

稍后更改tasks也不会自动更新存储对象。

最好将从您的 api 调用接收到的数据直接放入 store 对象中

import { writable } from "svelte/store";
import config from "../../config";
import axios from "axios";

let tasks = [
  {
    // this is what api fetches.
    id: 500,
    name: "task 500",
    status: 0,
  },
];

const Tasks = writable(tasks);

axios
  .get(config.API_URL + "task")
  .then(function (response) {
    response.data.tasks.forEach((task) => {
      tasks.push(task);
    });
    
    // Update Tasks instead
    Tasks.set(tasks);
  })
  .catch(function (error) {
    console.log("something went wrong");
  });

export default Tasks;
于 2020-07-29T18:00:54.897 回答