如何不丢失从父组件到子组件的状态答案

【问题标题】：how not to lose state from parent component to child component如何不丢失从父组件到子组件的状态
【发布时间】：2020-11-26 11:48:11
【问题描述】：

我有一个显示所有帖子的视图。这些帖子上方有一个过滤器，用户可以根据他选择的选项过滤帖子。在他选择选项后，过滤后的帖子会返回。

假设用户过滤了帖子，然后点击其中一个帖子，这意味着显示帖子的父组件将被销毁。如果现在，用户（在特定帖子页面上）点击后退按钮，它将带他到所有帖子页面，但过滤器不会保留，因为父组件被销毁然后创建。

在特定页面单击后退按钮后保留过滤器和过滤帖子的一种解决方案是使用 vuex。当用户选择过滤器时，我们将对象存储在 vuex 中。当用户点击后退按钮时，商店已经有了过滤器。问题是按照这种方式给我带来了一些问题并且需要更多时间。

你还能想到什么方法？我不能使用keep-alive，因为我似乎只能将它用于动态组件，而不能用于任何其他方式。

【问题讨论】：

只需将过滤器存储在组件树的更上方，这样它就不会被破坏。
不是这样的。看来我错了，他们没有亲子关系
好的，但这真的很重要吗？只需将过滤器存放得足够高，以免损坏。为什么“不是这样”？
那是问题伙伴..我刚刚看了（特定帖子页面和所有帖子页面）是两条不同的路线。
我不知道为什么这意味着我的建议不起作用？ Vue 子级可以emit events，这意味着过滤器组件可以将选择的过滤器向上发送到不会被销毁的父级，并且在导航回“所有帖子”时，过滤器会再次向下传递并处于活动状态。

标签： javascript vue.js vuejs2 vue-component vuex

【解决方案1】：

我在这里看到 2 个选项：

Vuex - 用于状态管理，最好在需要在 2+ 个组件之间进行通信时使用。您可能需要一组方法来更新商店中的过滤器值，例如：

const store = {
  category: null,
  tag: null,
  date: null
}

const actions = {
  updateFilter({ commit }, payload) {
    commit('updateFilter', payload); // example payload structure: { filterName: 'category', filterValue: 'reviews' }
  }
}

const mutations = {
  updateFilter(state, payload) {
    state[payload.filterName] = payload.filterValue;
  }
}

export default {
  namespaced: true,
  store,
  actions,
  mutations
}

您需要将这些操作绑定到您网站上的 @click 事件。然后您需要将商店中的值与您的过滤器方法绑定（可能您还想在您的帖子列表更改时执行过滤方法，因此您可以使用watcher 例如）

如果您使用的是Vue router 和history mode，您可以通过query params 存储您的过滤器：

router.push({ path: 'blog', query: { category: 'reviews' }})

所以您的网址将变为blog?category=reviews - 当您将网址更改为点击的文章然后点击返回时，您将首先转到您拥有的最新查询参数集的网址（但当然您需要创建一个过滤组件的方法根据提供的过滤器创建帖子列表）

第二个选项的另一个好处是您将能够与其他人共享链接（因此他们会以与您相同的方式查看过滤后的帖子）。

【讨论】：