Question

我正在尝试在发送请求且响应到达时调用突变。这是我的请求文件：

 import axios from 'axios'
import router from '@/router'
import _ from 'lodash'

const instance = axios.create({
    baseURL: process.env.BASE_URL,
    timeout: 31000,
    headers: {
        Accept: 'application/json'
    },
});

const token = localStorage.getItem('access_token');
if(!_.isNil(token)) {
    instance.defaults.headers.Authorization = 'Bearer ' + token;
}


instance.interceptors.response.use(function (response) {
    return response
}, function (error) {
    if (error.response.status === 401) {
        router.push('/introduction')
    }
});

export default instance

这是我的主要商店

const vuexLocal = new VuexPersistence({
    storage: window.localStorage
});

Vue.use(Vuex);
axios.defaults.baseURL = 'http://api.balatar.inpin.co/';
export const store = new Vuex.Store({
    plugins: [vuexLocal.plugin],
    modules: {
            user,jobPost, company, application, cvFolder, event
        },
        state: {
            loader:''
        },
        getters: {

        },
        mutations: {
            LOADER:function (state, payload) {
                state.loader=payload;
                console.log('MUTATION')
            }
        },

        actions: {



        },
    });

当我尝试导入以下商店时

impotr {store} from '@/store/store'

然后像这样访问LOADER突变：

store.commit('LOADER')

它返回无法读取未定义属性提交的错误。我该怎么办？

Answer 1

您应该编写一个动作，然后通过该动作发送您的请求，并且一旦收到回复，您就可以commit和mutation

例如以下操作：

{
  /**
   * Login action.
   *
   * @param commit
   * @param payload
   */
  login: async function ({ commit }, payload) {
    commit('LOGGING_IN')

    try {
      const result = await fetchApi({
        url: 'http://api.example.com/login',
        method: 'POST',
        body: payload
      })
      commit('LOGIN_SUCCESS', result)
    } catch (error) {
      commit('LOGIN_FAILURE', error)
    }
  }
}

如上所示，

，一旦您调用登录名，它就会调用LOGGING_IN变异并将请求发送到某个地址，然后等待响应。如果获得成功响应，则将提交带有结果有效负载的LOGIN_SUCCESS突变，否则将提交带有已缓存错误的有效负载的LOGIN_FAILURE。

注意：您应该提供自己的fetchApi方法，这是一个承诺。

无法导入vuex存储以请求文件

1 个答案: