Глобальные наблюдатели Vuex - PullRequest
Новая
       38

Глобальные наблюдатели Vuex

1 голос
/ 17 марта 2019

У меня есть магазин Vuex, снабжающий многие компоненты Vue довольно крупным веб-приложением. Я хотел бы иметь возможность наблюдать состояния Vuex или геттеры для целей регистрации. Однако я хочу иметь возможность смотреть их «глобально», то есть не полагаясь на какой-либо конкретный компонент Vue. Это исключает такие хитрости, как 

//aComponent.vue
watch:{ '$store.state.data'(value, oldValue) { /*do something here*/ }}

и 

//App.vue
created() {
  this.$store.watch((state) => state.watchedState) => {/*do something here*/ })
}

Вместо этого я ищу способ наблюдать мои состояния или получатели Vuex непосредственно из модуля, в котором определено хранилище, чтобы при каждом изменении состояния я мог вызывать функцию, передавая ее в качестве аргументов старое состояние и новое состояние, чтобы записать изменение в базу данных (в идеале само изменение было бы обнаружено автоматически, как в Vue's watch(new,old) {...}.

Полагаю, я должен использовать для этой цели нативный метод Vuex store.watch(). Но до сих пор я не смог вызвать его из модуля магазина, как хотелось бы.

Есть подсказка? Или я что-то упустил, и то, что я пытаюсь сделать, будет так же эффективно сделано с другой техникой?

1 Ответ

1 голос
/ 17 марта 2019

Для просмотра мутаций у вас есть эта опция.

Вы можете subscribe в магазин и получать уведомления с помощью мутации после того, как это произойдет.

store.subscribe ((мутация, состояние) => { })

Вы можете достичь этого несколькими способами:

  1. используйте subscribe в магазине, который вы создаете вручную, скорее всего, в main.js

  2. создать плагин, который добавляется к каждому экземпляру магазина и снова subscribe к нему

  3. просто используйте официальный плагин vuex для регистрации

Для просмотра геттеров вам, вероятно, понадобится обезьяна исправить свойство getters вручную.

Опять же, если вы хотите посмотреть, что происходит с vuex во время разработки, вы можете использовать vuejs tools

...