vuejs-在同一组件中获取不同的日期

一起去 Vuex .

创建一个集中式存储,在其中组件使用 getters , actions 和 mutations ,并且存储区知道如何与api交互。

例如,您的 table 组件可以是 哑的 ,并期望 :data=someData 初始化 桌子 传递给它,然后它只呈现传递的内容。这个 someData 可以映射到Vuex getter (或直接指向处于存储状态的项)在父组件中。

当您的组件需要向api提交某些内容时,它可以触发父组件将接收的事件并调用适当的 action 或 mutation 在存储上,存储将知道在api中调用什么来执行此操作。因此,即使是您的父母也不完全知道api是如何工作的,只是您对if的抽象,由vuex存储表示。

我创造了一个 simple todos application 上周,对于这里的另一个问题,请随意查看,使用vue、vuex并将数据保存到 Firebase . 它也没有尽可能地实现rest,但是更改存储区以使用正确的rest方法并不太难 get , post , put , delete 等。

此应用程序的所有相关代码 App.vue 和 store.js ,只有一行 main.js 只需将存储区添加到Vue实例。

Vuex将帮助处理共享/自己的组件状态。如果您的问题是如何管理共享API调用,Vuex Persi不会直接解决该问题。 一旦你能让你的组件访问这些数据,它就会帮助你。

也就是说,您可以创建一个模块来执行api调用并检索数据,例如:

HTTPJS

export const getUser = async id => {      
  const response = await fetch(`/user/${id}`)
  return await response.json()
}

export const getContent = async id => {      
  const response = await fetch(`/content/${id}`)
  return await response.json()
}

这是一个可以帮助您使用或不使用VuEx的解决方案,现在您可以从任何地方调用这些方法。