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

【问题标题】：How to re render component once store data is updated via api svelte?通过 api svelte 更新存储数据后如何重新渲染组件？
【发布时间】：2020-11-19 09:04:09
【问题描述】：

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

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

【问题讨论】：

标签： svelte svelte-3 svelte-component svelte-store

【解决方案1】：

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

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

最好把从你的 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;

【讨论】：