CODEWITHSUNDEEP
vue.jsaxiosvue-router
markus vranceanu
markus vranceanu

Reputation: 25

Vue Js Axios get method

I use vue.js and I try to set a parameter id in axios.get request and I can't understand how exactly to do it 

import Vue from 'vue'
import Router from 'vue-router'
import Home from './views/Home.vue'
import Movie from './views/Movie.vue'
Vue.use(Router)

export default new Router({
  mode: 'history',
  base: process.env.BASE_URL,
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/about',
      name: 'about',
      // route level code-splitting
      // this generates a separate chunk (about.[hash].js) for this route
      // which is lazy-loaded when the route is visited.
      component: () => import(/* webpackChunkName: "about" */ './views/About.vue')
    },
    {
      path: '/movie/:m_id',
      name: 'movie',
      component: Movie
    }
  ]
})

import Navbar from '../components/Navbar'
import axios from "axios"

export default {
     components:{
        Navbar
      },
      data () {
    return {
      movi: null,
    }
    },
 mounted () {
    axios
      .get(`https://api.themoviedb.org/3/movie/${m_id}?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US`)
      .then(response => (this.movi= response.data))
  }
}
I am trying to pass to axios this id of the page to get information about that specific movie and I got stuck. Any help?

Upvotes: 1

Views: 2075

Answers (2)

markus vranceanu
markus vranceanu

Reputation: 25

#How can I do the same thing but in Vuex
import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios';
import router from './router'

Vue.use(Vuex)
Vue.use(Axios)
Vue.use(router)

export default new Vuex.Store({
  // data() {
  //   return {
  //     m_id:this.$route.params.m_id

  //   }
  // },
  // m_id : this.$route.params.m_id,

  state: {
    video_key: [],
  },
  mutations: {
    updateInfo (state , video_key){
      state.video_key = video_key
    }
  },
  getters:{
    m_id : this.route.params.m_id 
  },
  actions: {

    fetchData({commit,getters}){
      axios.get(`https://api.themoviedb.org/3/movie/${this.m_id}/videos?api_key=7bc75e1ed95b84e912176b719cdeeff9&language=en-US`)
        .then(response =>{
          commit('updateInfo',response.data.results[0].key)
        })
    }
  }
})

Upvotes: 0

Flame
Flame

Reputation: 7580

You can try this to use your params from the URL:

// Retrieve the `m_id` param from the `this.$route.params` object:
this.$route.params.m_id

For more info see https://router.vuejs.org/api/#route-object-properties

Upvotes: 1

Related Questions