I'm learning vuex at the moment and wondering if there is a way to pass a different endpoint url in my vuex action? I'm building a simple movie app using a movies API and have numerous buttons that will call the API and post specific categories. What I would like to do is dispatch the same function from vuex but specify which endpoint to use rather than create the same function with just a different endpoint in 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)
})
},
}
movies component:
<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>