使用关系构建 Vuex 模块答案

【问题标题】：Structuring Vuex modules with relations使用关系构建 Vuex 模块
【发布时间】：2020-10-01 14:02:44
【问题描述】：

我对 vue 和 vuex 比较陌生。我需要一些帮助来了解如何在组件中构建我的 vuex 存储和/或本地状态。

我有以下数据结构（facebook 营销仅供参考）

- campaigns
- adsets: Is a group of ads. Relation = campaign_id
- ads: Relation = adset_id

我有两个页面/路线，CampaignList.vue (/campaign) 和 CampaignShow.vue (/campaign/{campaignId})。每条路由都有自己的 api-call 以获取“list”格式 (/api/campaign) 或具有“show”格式 (/api/campaign/{id}) 的单个广告系列的活动更多数据。

如预期的那样，列表将列出所有广告系列。显示页面将显示活动数据（CampaignData 组件），列出所有广告集（Adsets 组件），并在选择广告集时获取并显示该广告集中的所有广告（Ads 组件）。编辑广告时，会弹出一个模态组件。也就是说我需要在组件之间共享数据。

我如何使用 vuex 模块和/或组件中的本地状态来构建它？

我的Show 页面是否有它自己的模块，例如campaign.js 和我的List 页面campaigns.js？如果是这样，我如何在Show页面上构建模块？

我知道大问题，但我真的被困在这里。提前致谢。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

这只是 Mantas Daračiūnas 已经回答的问题的延伸。如图所示，在 CampaignList.vue 中使用 @click=function(id) 然后在函数中使用 state/getters 值来查找此活动。（我假设只有一个 API 可以获取所有数据）

然后您可以将这些数据发送到 store 中以便在 CampaignShow.vue 中访问，或者直接在 CampaignShow.vue 中将它们作为 props 传递。

【讨论】：

感谢您花时间解释！ List 和 Show 这两个页面是两条路线。我对每条路线都有一个调用：/campaign 用于以“list”格式获取所有广告系列，“/campaign/{id}”用于显示格式（更多数据在这里）。然后我通过例如“/campaign/{id}/ads 等获取广告和广告集。如果我想使用模块运行，显示广告集和广告是否有自己的模块？
我想你在谈论 vuex 模块。它们只是为了将数据排列在不同的文件中以便理解。因此，它们不会影响逻辑。关于路由，可以在触发动作后推送 this.$store.dispatch('action').then((res) => { this.$router.push({ }); })。
如果您有多个 api，这将更容易，因为您可以从 @click=function(id) 触发广告 api，然后将其存储在广告状态。更好的方法是使用 @click=function(id) 传递此 id 并从存储操作触发该广告 api，然后将结果存储在广告状态中（如果需要）并在新路由中访问它。像 this.$store.dispatch('action').then((res) => { this.$router.push({ }); })

【解决方案2】：

如果您的应用程序中只有这些，您可以将所有数据存储在 store/index.js 文件中，该文件只是 VUEX 索引文件。

export default {
  state: {
    campaigns: [],
    adsets: [],
    ads: []
  }
}

当您检索所需数据时（通过状态或需要修改 - getter）到 CampaignShow.vue 您可以并且可能应该通过 props 将数据传递给组件这同样适用于 Modal 组件。

【讨论】：

这不是全部，它只是“广告系列”部分。我如何处理商店中的“showById”？我是否从后端获取一项并将其添加到campaigns 数组中，然后通过在数组中找到它来选择它？那么该数组将只包含一项.. ?
这在很大程度上取决于您要达到的目标。但无论哪种方式，您都可以推送 1 个广告系列，也可以完全加载所有广告系列。只需在商店中使用mutators。有关它的更多信息here 要通过内部商店获取 campaigns，请使用 getters: =campaignId) } } ```
谢谢。我知道吸气剂和东西。我正在寻找的答案是，如果活动数组也应该处理“显示”页面，即使它只包含一个项目？我不会获取该页面上的所有广告系列，因为它们不会被使用。
由于您可能会获取CampaignList 页面上的所有广告系列，因此您最好只处理数据。有多种快速解决方案可以在复杂结构（如对象数组）中查找数据。
@ZedHome 我编辑了我的帖子。这两页是路线，可能不是那么清楚。所以我可以在不通过 CampaignList 的情况下进入 CampaignShow。然后将不会加载广告系列。我认为当我只需要一个时，没有必要获取所有广告系列..？