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

我到处搜索过,但是找不到与我的用例匹配的解决方案。我想根据在地址栏中键入的信息使用动态URL进行API调用。

我正在执行以下操作:

${opt:stage}

SET_API_DATA提交:

${self:provider.stage}

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

如何使用Nuxt将路由器导入Vuex,如何实现所需的行为?

monster0857 回答:如何通过Nuxt.js在Vuex中设置和使用路由器

首先,您需要检查文件夹结构是否正确设置为具有该数量的参数。查看文档=> 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

本文链接:https://www.f2er.com/3103333.html

大家都在问