我正在使用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)
}
答案 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)
}