как не потерять состояние от родительского компонента к дочернему компоненту

Question

У меня есть представление, в котором отображаются все сообщения. Над этими сообщениями есть фильтр, и пользователь может фильтровать сообщения в зависимости от того, какие параметры он выбирает. После того, как он выберет параметры, будут возвращены отфильтрованные сообщения.

Допустим, пользователь отфильтровал сообщения и после этого щелкнул одно из сообщений, это означает, что родительский компонент, который показывал сообщения, будет уничтожен. Если теперь пользователь (который находится на указанной c странице сообщения) нажимает кнопку «Назад», он перейдет на страницу всех сообщений, но фильтры не будут сохраняться, поскольку родительский компонент был уничтожен, а затем создан.

Одним из решений для сохранения фильтров и отфильтрованных сообщений после нажатия кнопки «Назад» со страницы указанной c является использование vuex. когда пользователь выбирает фильтры, мы сохраняем объект в vuex. когда пользователь нажимает кнопку "Назад", в магазине уже будут фильтры. Проблема в том, что этот путь вызывает у меня некоторые проблемы и занимает гораздо больше времени.

Вы можете придумать какой-нибудь другой способ? Я не могу использовать keep-alive, так как кажется, я могу использовать его только для компонентов Dynami c, а не каким-либо другим способом.

Answer 1

Я вижу здесь 2 варианта:

1. 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
}

И вам нужно привязать эти действия к событиям via @click на вашем веб-сайте. Затем вам нужно связать значения из магазина с помощью метода фильтров (возможно, вы также захотите выполнить метод фильтрации при изменении списка сообщений, поэтому вы можете использовать watcher , например)

Если вы используете Vue маршрутизатор и режим истории , вы можете сохранить свои фильтры с помощью параметров запроса :

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

Таким образом, ваш URL-адрес станет blog?category=reviews - и когда вы измените свой URL-адрес на статью, по которой вы щелкнули, а затем щелкните обратно, вы сначала go перейдете на URL-адрес с последними параметрами запроса, которые у вас были (но, конечно, вы необходимо создать метод, который будет отфильтровывать компонент, создать список сообщений на основе предоставленных фильтров)

Дополнительным преимуществом второго варианта является то, что вы сможете поделиться ссылкой с другими людьми (чтобы они будет видеть отфильтрованные сообщения так же, как и вы).