title: How to use vue-resource ($http) and vue-router ($route) in a vuex store?
body: <p>Before I was getting movie detail from the component's script. The function first check whether the movie ID of the store is same as of the route's param movie ID. If its same then don't get the movie from the server API, or else get the movie from the server API.</p>
  
  <p>It was working fine. But now I am trying to get the movie details from the store's mutation. However I am getting error</p>
  
  <blockquote>
    <p>Uncaught TypeError: Cannot read property '$route' of undefined</p>
  </blockquote>
  
  <p>How to use vue-router <code>($route)</code> to access the params and vue-resource <code>($http)</code> to get from the server API in vuex store?</p>
  
  <p>store.js:</p>
  
  <pre><code>export default new Vuex.Store({
      state: {
          movieDetail: {},
      },
      mutations: {
          checkMovieStore(state) {
              const routerMovieId = this.$route.params.movieId;
              const storeMovieId = state.movieDetail.movie_id;
              if (routerMovieId != storeMovieId) {
                  let url = "http://dev.site.com/api/movies/movie-list/" + routerMovieId + "/";
                  this.$http.get(url)
                      .then((response) =&gt; {
                          state.movieDetail = response.data;
                      })
                      .catch((response) =&gt; {
                          console.log(response)
                      });
              }
          },
      },
  });
  </code></pre>
  
  <p>component script:</p>
  
  <pre><code>export default {
      computed: {
          movie() {
              return this.$store.state.movieDetail;
          }
      },
      created: function () {
          this.$store.commit('checkMovieStore');
      },
  }
  </code></pre>