Estoy aprendiendo vuex en este momento y me pregunto si hay una manera de pasar una URL de punto final diferente en mi acción vuex. Estoy creando una aplicación de películas simple usando una API de películas y tengo numerosos botones que llamarán a la API y publicarán categorías específicas. Lo que me gustaría hacer es enviar la misma función desde vuex pero especificar qué punto final usar en lugar de crear la misma función con solo un punto final diferente en vuex.

Vuex:

 import axios from 'axios' const topTwentyEndpoint = 'https://api.themoviedb.org/3/discover/movie?sort_by=popularity.desc&api_key=' const theatresEndpoint = 'https://api.themoviedb.org/3/discover/movie?primary_release_date.gte=2014-09-15&primary_release_date.lte=2014-10-22&api_key=' export const state = () => ({ posts: [], }) export const mutations = { setMovies(state, posts) { state.posts = posts }, } export const getters = {} export const actions = { getMovies({ commit }) { axios.get(topTwentyEndpoint).then((response) => { commit('setMovies', response.data.results) }) }, }

componente de películas:

 <template> <form id="formGetMovies" class="flex flex-col items-start w-3/4 pt-5 get-movies" > <div class="flex buttons__row"> <button class="py-3 mt-2 mr-5 text-white bg-red-700 rounded-md hover:bg-red-800 px-7 btn btn__submit btn-disabled" :class="{ disabled: moviesShown }" :disabled="moviesShown" @click.prevent="submitForm" > Top 20 </button> <button class="py-3 mt-2 text-white bg-red-700 rounded-md hover:bg-red-800 px-7 btn btn__submit btn-disabled" :class="{ disabled: moviesShown }" :disabled="moviesShown" @click.prevent="submitForm" > In Theatres Now </button> </div> </form> </template> <script> export default { name: 'MoviesForm', data() { return { moviesShown: false, } }, methods: { submitForm() { this.$store.dispatch('movies/getMovies') this.moviesShown = true }, }, } </script>