Question

我有一个苗条的商店，我在其中将一些虚拟数据保存在名为task的变量中。我还使用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更新存储数据后如何重新呈现组件？

1 个答案: