Как использовать vue-resource ($ http) и vue-router ($ route) в магазине vuex?

Чтобы использовать $http или $router в вашем магазине vuex, вам нужно будет использовать основной экземпляр vue. Хотя я не рекомендую использовать это, я добавлю то, что рекомендую, после ответа на фактический вопрос.

В вашем main.js или там, где вы создаете свой экземпляр vue, например:

new Vue({ 
  el: '#app',
  router,
  store,
  template: '<App><App/>',
  components: {
    App
  }
})

или что-то подобное, вы могли бы также добавить плагины vue-router и vue-resource.

Внесение небольшого изменения в это:

export default new Vue({ 
  el: '#app',
  router,
  store,
  template: '<App><App/>',
  components: {
    App
  }
})

Теперь я могу импортировать его в магазины vuex следующим образом:

//vuex store:
import YourVueInstance from 'path/to/main'

checkMovieStore(state) {
const routerMovieId = YourVueInstance.$route.params.movieId;
const storeMovieId = state.movieDetail.movie_id;
if (routerMovieId != storeMovieId) {
  let url = "http://dev.site.com/api/movies/movie-list/" + routerMovieId + "/";
  YourVueInstance.$http.get(url)
    .then((response) => {
       state.movieDetail = response.data;
     })
     .catch((response) => {
       console.log(response)
     });
  }
}

и, как сказано в ответе Austio, этот метод должен быть action, поскольку mutations не предназначены для обработки асинхронного режима.

Теперь перейдем к рекомендуемому способу этого.

1. Ваш component может получить доступ к route params и передать его action.

   methods: {
     ...mapActions({
       doSomethingPls: ACTION_NAME
     }),
     getMyData () {
       this.doSomethingPls({id: this.$route.params})
     }
   }
   

2. Затем action выполняет вызов через абстрактный служебный файл API (read _16 _ )

   [ACTION_NAME]: ({commit}, payload) {
      serviceWhichMakesApiCalls.someMethod(method='GET', payload)
        .then(data => {
           // Do something with data
        })
        .catch(err => {
           // handle the errors
        })
   }
   

3. Ваш actions выполняет некоторую асинхронную работу и передает результат mutation.

   serviceWhichMakesApiCalls.someMethod(method='GET', payload)
        .then(data => {
           // Do something with data
           commit(SOME_MUTATION, data)
        })
        .catch(err => {
           // handle the errors
        })
   

4. Mutations должны быть единственными, кто может изменить ваш state.

   [SOME_MUTATION]: (state, payload) {
      state[yourProperty] = payload
   }
   

export const ENDPOINTS = {
  TEST: {
    URL: 'https://jsonplaceholder.typicode.com/posts/1',
    METHOD: 'get'
  }
}

import Vue from 'vue'
import { ENDPOINTS } from './endpoints/'
import { queryAdder } from './endpoints/helper'
/**
*   - ENDPOINTS is an object containing api endpoints for different stages.
*   - Use the ENDPOINTS.<NAME>.URL    : to get the url for making the requests.
*   - Use the ENDPOINTS.<NAME>.METHOD : to get the method for making the requests.
*   - A promise is returned BUT all the required processing must happen here,
*     the calling component must directly be able to use the 'error' or 'response'.
*/

function transformRequest (ENDPOINT, query, data) {
  return (ENDPOINT.METHOD === 'get')
      ? Vue.http[ENDPOINT.METHOD](queryAdder(ENDPOINT.URL, query))
      : Vue.http[ENDPOINT.METHOD](queryAdder(ENDPOINT.URL, query), data)
}

function callEndpoint (ENDPOINT, data = null, query = null) {
  return new Promise((resolve, reject) => {
    transformRequest(ENDPOINT, query, data)
      .then(response => { return response.json() })
      .then(data => { resolve(data) })
      .catch(error => { reject(error) })
  })
}

export const APIService = {
  test () { return callEndpoint(ENDPOINTS.TEST) },
  login (data) { return callEndpoint(ENDPOINTS.LOGIN, data) }
}

export function queryAdder (url, params) {
  if (params && typeof params === 'object' && !Array.isArray(params)) {
    let keys = Object.keys(params)
    if (keys.length > 0) {
      url += `${url}?`
      for (let [key, i] in keys) {
        if (keys.length - 1 !== i) {
          url += `${url}${key}=${params[key]}&`
        } else {
          url += `${url}${key}=${params[key]}`
        }
      }
    }
  }
  return url
}

Итак, несколько вещей, $ store и $ route, являются свойствами экземпляра Vue, поэтому доступ к ним внутри экземпляра Vuex не работает. Кроме того, мутации синхронны, вам нужны действия.

1. Мутации => Функция, которая задает состояние и некоторые аргументы, изменяет состояние

2. Действие => Выполняйте асинхронные действия, такие как HTTP-вызовы, а затем фиксируйте результаты в мутации.

Итак, создайте действие, которое отправляет http. Имейте в виду, что это псевдокод.

//action in store
checkMovieStore(store, id) {
  return $http(id)
    .then(response => store.commit({ type: 'movieUpdate', payload: response })
}

//mutation in store
movieUpdate(state, payload) {
  //actually set the state here 
  Vue.set(state.payload, payload)
}

// created function in component
created: function () {
   return this.$store.dispatch('checkMovieStore', this.$route.params.id);
},

Теперь созданная функция отправляет действие checkMovieStore с идентификатором, которое выполняет HTTP-вызов, после его завершения обновляет хранилище значением.

В вашем магазине vuex:

import Vue from 'vue'

Vue.http.post('url',{})

В отличие от обычных компонентов vue: this.$http.post(...)

Я настоятельно рекомендую импортировать axios в модуль vuex (хранилище и подмодули) и использовать его для HTTP-запросов.

Для доступа к экземпляру vue в магазине используйте this._vm.
Но, как посоветовал Амреш, не используйте такие вещи, как $router в vuex