如何在通过 api svelte 更新存储数据后重新渲染组件？

Question

我有一个 svelte store，我在变量命名任务中保存了一些虚拟数据。我还使用 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;

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

Answer 1

问题是您正在更新 tasks，而您的商店实际上是 Tasks（这是用您的虚拟数据初始化的。

稍后更改 tasks 也不会自动更新商店对象。

最好将从您的 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,
  },
];

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;

如何在通过 api svelte 更新存储数据后重新渲染组件？

How to re render component once store data is updated via api svelte?

svelte

svelte-component

svelte-store

svelte-3