Vue Js Axios 获取方法答案

【问题标题】：Vue Js Axios get methodVue Js Axios 获取方法
【发布时间】：2019-08-03 08:52:29
【问题描述】：

我使用 vue.js 并尝试在 axios.get 请求中设置参数 id，但我不明白该怎么做

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

我试图将页面的这个 id 传递给 axios 以获取有关该特定电影的信息，但我被卡住了。有什么帮助吗？

【问题讨论】：

你的 m_id 定义了吗？ Console.log 它，因为看起来您应该在组件中定义一个名为 m_id 的道具。此外，您应该使用 this.m_id 访问此变量

标签： vue.js axios vue-router

【解决方案1】：

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

【讨论】：

【解决方案2】：

您可以尝试使用 URL 中的参数：

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

欲了解更多信息，请参阅https://router.vuejs.org/api/#route-object-properties

【讨论】：

我怎样才能在 store.js 中做同样的事情。
我不知道 store.js ，你可以创建一个新问题或在网上搜索
也许你误会了，我的意思是实现相同的东西，但使用 Vuex ，在 vuex 中我无法像在 vue 组件中一样访问路由器 ID