Как настроить параметр поиска в Vue / Vuex на основе текущего маршрута

Question

Я создаю простое приложение с использованием vuex и vue-router, которое рендерит фильмы и шоу по разным маршрутам, а также предоставляет возможность поиска для обоих.Фильмы и шоу находятся в отдельных компонентах, а мой элемент поиска - в компоненте Layout.vue.Я сделал опцию поиска фильмов через vuex, которая работает должным образом, и теперь я хочу настроить опцию поиска для шоу.Теперь мне интересно, можно ли настроить параметр поиска через vuex, чтобы запускать поиск фильмов только тогда, когда я нахожусь на маршруте '/ movies', и запускать поиск шоу только тогда, когда я нахожусь на маршруте '/ show'?

store.js

const getters = {
  filterMovies: state => {
    return state.movies.filter(movie => {
      return movie.title.toLowerCase().match(state.textSearch.toLowerCase())
    })
  },
  movie: state => state.movie
};

const mutations = {
  setMovies: (state, items) => (state.movies = items),
  setMovie: (state, items) => (state.movie = items),
  setLoading: (state, payload) => (state.loading = payload),

  updateSearch: (state, payload) => (state.textSearch = payload)
};

Layout.vue

  methods: {
    updateSearch(e) {
      this.$store.commit('updateSearch', e.target.value)
    }

Answer 1

Таким образом, вы можете передать текущий маршрут действию / мутации, а затем легко справиться с ним.

    updateSearch(e) {
      const { currentRoute } = this.$router.currentRoute
      this.$store.commit('updateSearch', e.target.value, currentRoute)
    }

Answer 2

Я бы сказал, что вы хотите сделать, это передать параметр получателю

getMoviesByName: state => name => state.movies.filter(x => x.title === name)

назови это так

this.$store.getters.getMoviesByName(this.$route.params.movieName)

Кроме того, вы хотите использовать вложенные маршруты для визуализации необходимых данных на основе маршрута.