1

Имеется такой код:

store/index.js Здесь подключаются модули. Рутовые actions/getters/mutations здесь пока не используются, т.к. планируется всё приложение хранить в модулях (?)

import Vue from 'vue'
import Vuex from 'vuex'
import products from './modules/products.js'
import user from './modules/user.js'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    user: [],
    products: [],
  },
  modules: {
    user: user,
    products: products,
  },
})

store/modules/products.js Здесь один из подключаемых модулей, который делает запрос к апи и отдает продукты (количество методов упростил для лучшей читаемости).

import * as config from '../../config.js'

export default {
  namespaced: true,
  state: {
    main: [],
  },
  getters: {
    getMainProducts: (state, getters, rootState, rootGetters) => {
      return state.main;
    }
  },
  actions: {
    getMainProducts({commit}) {
      axios.get(config.url.products)
        .then(response => {
          const products = response.data.products;
          commit('set', { type: 'main', items: products })
        })
        .catch(e => {
          throw e
        })
    }
  },
  mutations: {
    set(state, { type, items }) {
      state[type] = items
    }
  },
}

containers/Home.vue Здесь как раз мой вопрос

<template>
  <div class="products">
    <product v-for="(item, index) in products" :key="index" :item="item"></product>
  </div>
</template>

<script type="text/javascript">
  import Product from '../components/Product.vue'

  export default {
    mounted() {
      this.$store._actions['products/getMainProducts'][0]()
    },
    computed: {
      products() {
        return this.$store.getters['products/getMainProducts']
      }
    },
    components: { Product },
    name: 'app',
  }
</script>

От подобных строк this.$store._actions['products/getMainProducts'][0]() течёт кровь из глаз, но после нескольких часов поисков, я не нашел правильного вызова геттера или экшена у модуля.

Вопрос в правильном вызове чего-либо у дочернего модуля. Как это должно выглядеть в моём случае?
Так же, если есть какие-либо советы по подходу и коду, либо указания на ошибки, то буду очень рад.

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

Спасибо.

1 ответ 1

1

Сам спросил, сам ответил.

В данном примере:

containers/Home.vue

<template>
  <div class="products">
    <product v-for="(item, index) in products" :key="index" :item="item"></product>
  </div>
</template>

<script type="text/javascript">
  import { mapGetters } from 'vuex' // Подключаем хелпер
  import { mapActions } from 'vuex' // Подключаем хелпер
  import Product from '../components/Product.vue'

  export default {
    computed: {
      ...mapGetters({
        products: 'products/getMainProducts' // Модуль/геттер, products доступно, как this.products
      })
    },
    methods: {
      ...mapActions({
        getMainProducts: 'products/getMainProducts' // Модуль/экшен
      })
    },
    mounted() {
      this.getMainProducts() // Вызов экшена (ключ в mapActions())
    },
    components: { Product },
    name: 'app',
  }
</script>  

Провозился несколько часов, может кому поможет

1
  • 1
    Хей! Я посмотрел твой ответ, тк не знал способа вызвать действие модуля хранилища. А потом увидел строчку 'products/getMainProducts' и попробовал так: this.$store.dispatch('user/getUserData') и О ЧУДО! ОНО ЖИВОЕ! Почему-то у самого голова не дошла до того, чтобы попробовать '/' в качестве разделителя. Так что спасибо! 13 сен 2019 в 11:10

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.