如何设置搜索选项在vue/vuex基于当前路由

Question

我正在使用vuex和vue路由器创建一个简单的应用程序，它可以在不同的路径上渲染电影和节目，并为这两个路径提供搜索选项。电影和节目在单独的组件中，我的搜索输入元素在布局中。vue组件。我通过vuex制作了一个电影搜索选项，可以正常工作，现在我想为节目设置搜索选项。现在我想知道是否可以通过vuex设置搜索选项，仅当我在“/movies”路线上时触发电影搜索，并仅当我在“/shows”路线上时触发节目搜索？

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)
};

我ayout.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

我想说的是，您要做的是将一个参数传递给getter

getMoviesByName： state=

这样叫吧

这个$百货商店吸气剂。getMoviesByName（this.$route.params.movieName）

此外，您想要做的是利用嵌套路由来呈现基于路由所需的数据。