可以行動vuex內沒有訪問VUE資源

Question

嘿，大家好我試圖做我的vuex側動作裏面的請求，我得到這個錯誤：

Cannot read property '$http' of undefined 

設置我的VUE資源這樣在我的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) 
}) 

然後在商店：

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

任何 幫幫我？

Answer 1

這是問題的一個合適的解釋，即$http不vuex https://stackoverflow.com/a/42571288/6355502

狀態只能在基因突變改變中訪問。不在行動中。只需從動作中提交一個突變來改變狀態。

昨天晚上我試了同樣的錯誤消息，強迫我在觸發突變的操作中執行異步提取。你不能在突變中進行異步操作，並且你不能在動作中改變狀態，所以你必須分割代碼。

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