svelte - 通过 api svelte 更新存储数据后如何重新渲染组件?
问题描述
我有一个苗条的商店,我在变量命名的任务中保存了一些虚拟数据。我还使用 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;
我需要以某种方式使用自动或手动重新呈现组件中的任务列表。或任何其他可能的方式。组件中的任务数据记录正常,但组件视图未更新。
解决方案
问题是您在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;