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

时间:2019-06-10 11:00:18

标签: vue.js vuejs2 vuex vue-router

我正在使用vuex和vue-router创建一个简单的应用程序,该程序可以渲染电影并在不同的路线上显示以及两者的搜索选项。电影和节目位于单独的组件中,而我的搜索-输入元素位于Layout.vue组件中。我通过vuex为电影制作了一个搜索选项,该选项可以正常工作,现在我想为节目设置搜索选项。 现在,我想知道是否可以通过vuex设置搜索选项以仅当我在“ /电影”路线上时才触发电影搜索,而仅当我在“ /电影”路线上时才触发搜索电影吗?

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

2 个答案:

答案 0 :(得分:0)

我想说的是您要向getter传递参数

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

这样称呼

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

您要做的是利用nested routes根据路线呈现所需的数据。

答案 1 :(得分:0)

因此,您可以将当前路线传递给操作/变异,然后就可以轻松进行处理。

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