如何使用 Nuxt.js 在 Vuex 中设置和使用路由器

Question

我到处搜索，但找不到符合我的用例的解决方案。我想根据输入到地址栏中的信息使用动态 URL 进行 API 调用。

我正在执行此操作：

export const actions = {
  loadAPIData({ commit }) {
    Axios.get(
      "apiUrl.com" +
        this.router.push({
          city: this.router.params.city,
          company: this.router.params.company,
          dealSlug: this.router.params.dealSlug
        }) +
        "/" +
        this.router.params.company +
        "/" +
        this.router.params.dealSlug +
        "/"
    )
      .then(r => r.data)
      .then(dealDetails => {
        commit("SET_API_DATA", dealDetails);
      });
  }
};

SET_API_DATA 提交：

export const mutations = {
  SET_API_DATA(state, dealDetails) {
    state.dealDetails = dealDetails;
    for (
      let persons = 2;
      persons <= state.dealDetails.max_vouchers_per_person;
      persons++
    ) {
      state.amountOfPeopleArr.push({
        value: persons,
        text: persons + " personen"
      });
    }
  }
};

然后我想从 API 中获取与键入的 url 匹配的数据，例如：apiUrl.com/Amsterdam/Pizza/get-a-pizza-for-5-dollar。

如何使用 Nuxt 将路由器导入 Vuex 以及如何实现我想要的行为？

Answer 1

首先您需要做的是检查您的文件夹结构是否正确设置了该数量的参数。查看相关文档 => https://nuxtjs.org/guide/routing

接下来您可以将路由参数作为参数传递到您的调度方法中：

  asyncData({ store, params }) {
    store.dispatch('loadAPIData', {
      city: params.city,
      company: params.company,
      dealSlug: params.dealSlug
    })
  },

并且在您的商店中将有效载荷作为第二个参数：

export const actions = {
  loadAPIData({ commit }, {city, company, dealSlug}) {
    ...
  }
}

您可以在此处阅读有关 Vuex 负载的更多信息 => https://vuex.vuejs.org/guide/actions.html#dispatching-actions

如何使用 Nuxt.js 在 Vuex 中设置和使用路由器

How to set and use router in Vuex with Nuxt.js

router

action

vue.js

vuex

nuxt.js