时间戳

首页 > 解决方案 > 无法从服务器获取数据到 NuxtJS 存储

vue.js - 无法从服务器获取数据到 NuxtJS 存储

问题描述

这是我的代码：

export const state = () => ({
  products: []
});

export const getters = {
  getProducts: state => {
    return state.products;
  }
};
export const mutations = {
  SET_IP: (state, payload) => {
    state.products = payload;
  }
};

export const actions = () => ({
  async getIP({ commit }) {
    const ip = await this.$axios.$get("http://localhost:8080/products");
    commit("SET_IP", ip);
  }
});

服务器运行良好，但我无法将数据放入商店

标签： vue.jsvuejs2vuexnuxt.jsnuxtjs

解决方案

首先，我强烈建议您将您的动作和突变重命名为类似getProductsandSET_PRODUCTS而不是ip. 还要确保在操作中更改变量名称。虽然这不会改变任何功能，但它使您的代码更易于阅读。

其次，也许console.log(ip)在你在动作中定义之后添加一个权利const，看看你是否在那里得到了你想要的数据。在大多数情况下，您将要分配ip.data给您的变量。

最后，确保您在代码中的某处调用该操作。你应该这样做：

this.$store.dispatch('getIP'); // Using your current name
this.$store.dispatch('getProducts'); // Using my recommended name

推荐阅读