无法访问动作 vuex 中的 vue 资源

Posted 2023-02-22

【中文标题】无法访问动作 vuex 中的 vue 资源

【英文标题】：can't access vue resource inside action vuex

【发布时间】：2018-01-19 20:46:29

【问题描述】：

大家好，我正在尝试在 vuex 端的操作中发出请求，但出现此错误：

Cannot read property '$http' of undefined

我在 main.js 文件中以这种方式设置我的 vue 资源：

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

有什么帮助吗？

【问题讨论】：

试试Vue.$http.post 而不是this.$http.post

还是什么都没有：/

状态只能在突变中改变。不在行动中。

有人建议我这样做，因为动作是异步的

我昨晚尝试了同样的方法并收到错误消息，迫使我在触发突变的操作中执行异步获取。你不能在突变中进行异步操作。

【参考方案1】：

尝试通过这种方式访问​​ vue 属性this._vm.$yourDesiredPropertyName 例如this._vm.$http等 它对我有用。 您可以访问所有正确注册到 vue 实例的属性

【参考方案2】：

您可以使用 this._vm 从商店访问 Vue 实例。

this._vm.$http.post()

【参考方案3】：

通过Vue.prototype.$http访问axios

login(commit, loginFormData) 
            return new Promise((resolve, reject) => 
                commit('auth_request');
                Vue.prototype.$http(url: '/user/login', data: loginFormData, method: 'POST')
                    .then(resp => 
                        const token = resp.data.data.token;
                        const user = resp.data.data.profile;
                        localStorage.setItem('token', token);
                        localStorage.setItem('user', JSON.stringify(user));
                        Vue.prototype.$http.defaults.headers['Authorization'] = 'Bearer ' + token;
                        this.state.user = JSON.parse(localStorage.getItem('user')) || '';
                        this.state.token = localStorage.getItem('token') || '';
                        commit('auth_success', token, user);
                        resolve(resp)
                    )
                    .catch(err => 
                        commit('auth_error');
                        localStorage.removeItem('token');
                        localStorage.removeItem('user');
                        reject(err)
                    )
            )
        ,

【参考方案4】：

import axios from 'axios'
import Vue from 'vue'
import Vuex from 'vuex'

const axiosInstance = axios.create(
    baseURL: '',
    withCredentials: true,
)

Vue.prototype.$axios = axiosInstance
Vuex.Store.prototype.$axios = axiosInstance

这对我有用。

现在您可以在 Vue 和 Vuex 中通过 this.$axios 访问。

【参考方案5】：

vue 外部实例（本例中为store）使用Vue.http（不带美元符号），内部实例使用this.$http。

您可以在github 上找到更多信息。

【讨论】：

或 this._vm.$http.get... 在任何 vuex 操作中避免每次都必须导入 Vue 实例

【参考方案6】：

这里对$http在vuexhttps://***.com/a/42571288/6355502内无法访问的问题做一个正确的解释

状态只能在突变中改变。不在行动中。只需从动作内部提交一个突变来改变状态。

我昨晚尝试了同样的方法并收到错误消息，迫使我在触发突变的操作中执行异步获取。你不能在mutations中做异步操作，也不能在actions中改变状态，所以你必须拆分代码。

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

【讨论】：

那么我的请求在哪里？

在组件端，那么它应该调用调用动作的突变吗？

你能举一个简单的例子来说明你是如何做我想做的事情的吗？

你的解决方案没有改变我的问题，我无法访问 vue-resource，这是我的问题

这个例子并不完美。请查看 vuex 文档，了解从调用到操作的正确突变。