Как получить доступ к модулям Vuex и мутациям?

Я пытаюсь переключиться на использование Vuex вместо моего собственного магазина, и должен сказать, что я не нахожу документы настолько ясными, как в других местах мира Vue.js. Допустим, у меня есть модуль Vuex под названием "products", со своим собственным состоянием, мутациями, геттерами и т.д. Как мне ссылаться на действие в этом модуле, называемое, скажем, "clearWorking Data"? Документы дают этот пример доступа к состоянию модуля:

store.state.a // -> moduleA state

Но я ничего не вижу о добытчиках, мутациях, действиях и т.д.

Ответ 1

В вашем примере это будет store.dispatch('products/clearWorkingData') вы можете думать о действиях/мутациях как о файловой системе. Чем глубже модули вложены глубже в дерево.

поэтому вы можете пойти store.commit('first/second/third/method') если у вас было дерево, которое было на три уровня.

Ответ 2

В дополнение к принятому ответу я хочу предоставить вам обходной путь для получателя, который отсутствует в ответе.

Отладка магазина
В любом случае вы можете вызвать console.log(this.$store) для отладки Магазина.
Если вы сделаете это, вы увидите, что получателям предшествует пространство имен в их имени.

Получить доступ к пространству имен
this.$store.getters['yourModuleName/someGetterMethod']

Отправка пространства имен
this.$store.dispatch('yourModuleName/doSomething')

Отправка пространства имен с параметрами
this.$store.getters['yourModuleName/someGetterMethod'](myParam)

Заключение
Ключ должен обрабатывать пространство имен как файловую систему, как объяснил Джастин.

Изменение: нашел хорошую библиотеку для работы с vuex Store
В дополнение к базовым знаниям я хотел бы добавить эту библиотеку vuex в качестве приятного дополнения для эффективной и быстрой работы с магазином vuex. https://github.com/davestewart/vuex-pathify.
Это выглядит довольно интересно и заботится о конфигурации, а также позволяет вам напрямую обрабатывать 2waybinding с помощью vuex.

** Изменить: спасибо другим ответам. Добавлен способ диспетчеризации с параметрами для целостности.

Ответ 3

В качестве еще одного дополнения к принятому ответу, если вам нужно передать параметр (и) в получатель (например, для извлечения определенного элемента из коллекции хранилища), вам нужно передать его следующим образом:

this.$store.getters['yourModuleName/someGetterMethod'](myParam)

Я не думаю, что мне нравится эта запись, но это то, чем она является - по крайней мере, на данный момент.

Ответ 4

Используя Vuex mapGetters и mapActions, вы можете сделать это довольно легко. Но я согласен, это все еще не очень очевидно в документации.

Предполагая, что в вашем модуле магазина "products" есть метод get с названием "mostPopular" и действие "clearWorkingData":

<template>
 <div>
  <p>{{mostPopularProduct}}<p>
  <p><button @click="clearProductData">Clear data</button></p>
 </div>
</template>
<script>
import { mapGetters, mapActions } from "vuex";

export default {
 computed: mapGetters({
  mostPopularProduct: "products/mostPopular"
 }),
 methods: mapActions({
  clearProductData: "products/clearWorkingData"
 })
}
</script>

Ответ 5

Помощник mapGetters просто отображает геттеры магазина на локальные вычисляемые свойства:

    import { mapGetters } from 'vuex'

    export default {
  // ...
  computed: {
    // mix the getters into computed with object spread operator
    ...mapGetters([
      'doneTodosCount',
      'anotherGetter',
      // ...
    ])
  }
}
If you want to map a getter to a different name, use an object:

    ...mapGetters({
  // map 'this.doneCount' to 'this.$store.getters.doneTodosCount'
  doneCount: 'doneTodosCount'
})