Question

我正在尝试获取从API提取并存储在VUEX存储中的令牌状态。不幸的是，我总是在控制台中添加一个关于graphQLClient.js的错误，该错误解释了store.state未定义。（确切的错误代码：“ TypeError： WEBPACK_IMPORTED_MODULE_4__store_index .a未定义”）。我精确指出App.vue在导出中包含两个函数：

beforeCreate() {
   this.$store.dispatch("getToken");
},
beforeMount() {
   this.$store.dispatch("getClients");
}

我注意到，beforeCreate应该在beforeMount之前调用，但是事实并非如此，我在所有地方都放置了console.log（），并且似乎在一次之前调用了beforeMount（）。

store / index.js：

import Vue from "vue";
import Vuex from "vuex";
import token from "./modules/token";
import client from "./modules/client";

Vue.use(Vuex);
export default new Vuex.Store({
  modules: {
    client,
    token
  }
});

store / module / client.js

import gql from "graphql-tag";
import graphqlClient from "../../utils/graphqlClient";
export default {
  state: {
    client: null,
    clientList: []
  },

  mutations: {
    ADD_CLIENT(state, client) {
      state.client = client;
    },
    GET_CLIENT_LIST(state, clientList) {
      state.clientList = clientList;
    }
  },

  actions: {
    async getClients({ commit }) {
      console.log(store.state.token.token);
      const response = await graphqlClient.query({
        query: gql`
          query {
            getClients(offset: 0, limit: 20) {
              id
            }
          }
        `
      });
      commit("GET_CLIENT_LIST", response.data.getClients);
    }
  },
  getters: {}
};

store / module / token.js：

import Axios from "axios";
import { port, host, userLogin, userPassword } from "../../utils/config";

export default {
    state: {
      token: "PasDeToken"
    },

    // mutations
    mutations: {
      GET_TOKEN(state, token) {
        state.token = token;
      }
    },

    // actions
    actions: {

      async getToken({ commit }) {
        const response = await Axios({
          url: `http://${host}:${port}/getToken?login=${userLogin}&   password=${userPassword}`,
          method: "get"
        });
        commit("GET_TOKEN", response.data.token);
      }
    },

    // getters
    getters: {
      gimmeMyToken: state => () => {
        console.log("Im ready");
        return state.token;
      }
    }
  
};

utils / graphqlClient.js：

import { ApolloClient } from "apollo-client";
import { HttpLink } from "apollo-link-http";
import { InMemoryCache } from "apollo-cache-inmemory";
import { port, host } from "./config";
import store from "../store/index";
export default new ApolloClient({
  
  link: new HttpLink({

    uri: `http://${host}:${port}/graphql`,
    headers: {
      authorization: `Bearer ${store.state.token.token}`
    }
  }),
  cache: new InMemoryCache()
});

编辑07/18：

我更改了一些内容，将Apollo Client更改为完整的Axios请求插件，这更好，但实际上无法正常工作。因此对graphQlClient.js进行了完全注释，现在在Client.js中使用它：

代码：

await Axios.post(
    "http://localhost:4000/graphql",
    {
      query: `query {
      getClients(offset: 0, limit: 20){
        id
      }
    }`
    },
    { headers: { Authorization: `Bearer ${store.state.token.token}`}}
  ).then((response) => {

    console.log(response.data);
    commit("GET_CLIENT_LIST", response.data.getClients);
  })
  .catch((err) => {
    console.log(store.state.token.token);
    console.log(err);
  });

错误代码：

eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJsb2dpbiI6IkJsdWVrYW5nbyIsImlhdCI6MTU2MzQzODI4NywiZXhwIjoxNTYzNDQxODg3fQ.DR_Ok-ODsVDGBI1mIbpzAAXPfIXS8hmWiOTvDI12Fs0 client.js:64
Error: "Request failed with status code 400"
createError createError.js:16
settle settle.js:17
handleLoad xhr.js:59

无法从JS文件中的存储中获取数据

0 个答案: