无法从服务器获取数据到 NuxtJS Store

Question

这是我的代码：

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

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

Answer 1

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

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

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

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

无法从服务器获取数据到 NuxtJS Store

can't get data from server to NuxtJS Store

vue.js

vuex

vuejs2

nuxt.js

nuxtjs