Question

我正在将Nuxt.js与Vuex一起使用，当有人使用某个参数（例如：https://example.com/?param=abc）进入我的网络并将该参数传递给状态时，我想触发一个突变。

我试图检查watchQuery属性https://nuxtjs.org/api/pages-watchquery的文档，但是没有有关如何执行此操作的示例，我只是找到了此How to watch on Route changes with Nuxt and asyncData，但看不到任何写方法使用watchQuery在Vuex存储中进行操作。

我尝试写：

actions: {
    watchQuery: true,
    asyncData ({ query, app }) {
       const { start } = query
       const queryString = start ? `?start=${start}` : ''
       return app.$axios.$get(`apps/${queryString}`)
       .then(res => {
           commit('setParam',res.data);
       })
    },
}

但是不允许这种语法。

任何帮助都将受到欢迎，谢谢！！

Answer 1

据我所知，watchQuery设置了一个查询字符串的监视程序，这意味着它在页面已呈现时正在等待查询更改，从而可以再次调用诸如asyncData()之类的方法。 br /> 由于您只想在用户进入页面时保存某个参数，然后将参数传递给状态，因此您只需要将asyncData方法移动到要从中获取参数的页面上，您还需要从自动传递到store的上下文中提取query和asyncData，然后使用store和query将查询参数保存到您的状态。

这是一个简单的恶魔过渡

// Your page from which you want to save the param
export default {
  asyncData({store, query}) { // here we extract the store and query
    store.state.somethingForSavingTheParam = query.nameOfTheParamYouWantToSave
     // instead of using store.state you could use store.commit(...) if that's what you want
  }
}

在Vuex商店中查看URL查询参数

1 个答案: