Следите за параметром запроса URL в магазине Vuex - PullRequest
Новая
       17

Следите за параметром запроса URL в магазине Vuex

0 голосов
/ 21 декабря 2018

Я использую Nuxt.js с Vuex, и я хотел бы вызвать мутацию, когда кто-то входит в мою сеть с определенным параметром (например: https://example.com/?param=abc), и передает параметр в состояние.

Я пытался проверить документацию свойства watchQuery https://nuxtjs.org/api/pages-watchquery,, но примеров того, как это сделать, нет, я только что обнаружил это Как наблюдать за изменениями в маршруте с Nuxt и asyncData , но яЯ не могу понять, как написать действие в хранилище Vuex с помощью watchQuery.

Я пытался написать: 

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

Но этот синтаксис недопустим.

Любая помощь будет приветствоваться, спасибо заранее!

1 Ответ

0 голосов
/ 22 декабря 2018

Насколько я понимаю, watchQuery устанавливает наблюдателя для строки запроса, что означает, что он ожидает запроса , изменяющего , пока страница уже обработана, что позволяет снова вызывать методы, подобные asyncData().
Так какВы хотите сохранить определенный параметр только тогда, когда пользователь вводит страницу и затем передает параметр в состояние, которое вам просто нужно, чтобы переместить метод 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
  }
}
...