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 that you have read and understand our privacy policy and code of conduct.

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