ne peut pas accès à la ressource de vue à l'intérieur une action vuex

Question

hey les gars, je suis en train de faire une demande à l'intérieur de mon action sur le côté vuex, et je reçois cette erreur:

Cannot read property '$http' of undefined 

i tournerai ma vue-ressources de cette façon dans mon fichier main.js:

import Vue from 'vue' 
import VueResource from 'vue-resource' 
import VueRouter from 'vue-router' 
import App from './App.vue' 
import {routes} from './routes'; 
import {store} from './store/store'; 
import VModal from 'vue-js-modal' 

Vue.use(VModal) 
Vue.use(VueResource); 
Vue.use(VueRouter); 

const router = new VueRouter({ 
    routes 
}); 

new Vue({ 
    el: '#app', 
    store, 
    router, 
    render: h => h(App) 
}) 

puis sur le magasin:

addStyle(state,newStyleObj) { 
    console.log(newStyleObj); 
    var vm = this; 
    this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj) 
     .then(response => { 
      state.tableStyles = response.body; 
      console.log(state.tableStyles) 
      console.log(response.body) 
     }, error => { 
      console.log(error); 
     }); 
} 

tout Aidez-moi?

Answer 1

Voici une bonne explication du problème que $http n'est pas accessible dans les vuex https://stackoverflow.com/a/42571288/6355502

L'état ne peut être modifiée dans les mutations. PAS dans les actions. Juste commettre une mutation de l'intérieur de l'action pour modifier l'état.

J'ai essayé la même chose la nuit dernière et j'ai reçu des messages d'erreur qui m'ont forcé à effectuer la récupération asynchrone dans les actions qui déclenchent des mutations. Vous ne pouvez pas effectuer d'opérations asynchrones dans des mutations et vous ne pouvez pas modifier l'état des actions, vous devez donc scinder le code.

// in actions 
addStyle ({ commit, state }, newStyleObj) { 
    console.log(newStyleObj); 
    var vm = this; 
    this.$http.post('http://localhost:16339/api/Styles/PostStyle/', newStyleObj) 
     .then(response => { 
      commit("setTableStyles", response.body); 
      console.log(state.tableStyles) 
      console.log(response.body) 
     }, error => { 
      console.log(error); 
     }); 
} 

// in mutations 
setTableStyles(state, payload){ 
state.tableStyles = payload; // or state.tableStyles.push(...payload) if tableStyles is an Array 
}