Question

给出classic mode Vuex存储nuxtServerInit以执行@nuxtjs/axios模块$get以获得简单的JSON：

import Vuex from "vuex";

const createStore = () => {
  return new Vuex.Store({
    state: () => ({
      todo: null
    }),
    mutations: {
      receiveTodo(state, todo) {
        state.todo = todo;
      }
    },
    actions: {
      async nuxtServerInit({ commit }, { app }) {
        const todo = await app.$axios.$get("https://jsonplaceholder.typicode.com/todos/1");
        console.log(todo);
        commit("receiveTodo", todo);
      }
    }
  });
};

export default createStore;

todo的值返回为：

��\u0002\u0000 �o;�лϓt`\tv� �j��\u0003�j��\u0003~;$tp��JP����6\b�SAs�B�\u0004N��vy�a�e��ᰱ��\u0007

在axios选项中将debug设置为true时，还会另外记录以下内容：

[Axios] [200 OK] [GET] https://jsonplaceholder.typicode.com/todos/1

我还需要采取什么其他步骤从此响应中提取JSON数据？是否需要设置标题以指示返回类型application/json？是否像您使用json()一样，将fetch()方面的内容用于响应？尝试像使用非Nuxt轴器一样访问data属性，这样会产生undefined：

async nuxtServerInit({ commit }, { app }) {
  const { data } = await app.$axios.$get("https://jsonplaceholder.typicode.com/todos/1");
  console.log(data) // undefined
}

此应用程序是使用create-nuxt-app创建的，并且正在使用"nuxt": "^2.1.0"和"@nuxtjs/axios": "^5.3.3"。

更新：

在app.$axios.$get("https://jsonplaceholder.typicode.com/todos/1")方法内的组件中执行相同的调用asyncData()成功返回JSON。在nuxtServerInit()中执行时，似乎是一个解析问题。

感谢您提供的任何帮助！

Nuxt Axios $ get Vuex nuxtServerInit返回内容类型问题

0 个答案: