Как в компоненте vue вывести геттер из хранилища?

Question

[Дима Паутов]

Использую у себя в локальном проекте nuxt.js.
Есть у меня компонент, счётчик добавленных товаров + общая сумма товаров.

Файлик стора с корзиной(store/cart.js):

export const state = () => ({
	items: []
});

export const getters = {
	totalCount(state){
		return state.items.length;
	},
	totalPrice(state){
		let totalPrice = 0;

		state.items.forEach(item => totalPrice += item.price);

		return totalPrice;
	}
};

export const actions = {
	add({ commit }, item){
		commit('add', item);
	}
};

export const mutations = {
	add(state, item){
		state.items.push(item);
	}
};

Это сам компонент счётчик:

import { mapGetters } from 'vuex'

export default {
	name: 'CartInfoBox',
	computed: {
		...mapGetters([
			'totalCount',
			'totalPrice'
		])
	}
}

Итак, ход действий:

Из компонента товара вызываем по клику на кнопку добавить добавление товара в хранилище:

this.$store.dispatch('cart/add', this.data);

// this.data - это объект, в котором лежат свойства этого товара, заголовок, id, цена и т.п.

В шаблоне счётчика выводим геттеры, которые считают кол-во товаров и общую сумму этих товаров

Шаблон вывода

<template>
{{ totalCount }} товара
<nuxt-link to="/cart">
  {{ totalPrice }} ₽
</nuxt-link>
</template>

<script src="./cart.js"></script>

Но, ничего не выводится. Хотя в стор всё уходит, дев. панель vue это чётко показывает, геттеры всё считают.
Как правильно вывести данные?

Answer 1

[Дима Паутов]

Вопрос решён. Меня мучал один вопрос, как вот этот код поймёт, что нужно идти в модуль стора cart.js

import { mapGetters } from 'vuex'

export default {
  name: 'CartInfoBox',
  computed: {
    ...mapGetters([
      'totalCount',
      'totalPrice'
    ])
  }
}

Оказалось всё просто, нужно указать имя этого модуля и в итоге получилось так:

import { mapGetters } from 'vuex'

export default {
  name: 'CartInfoBox',
  computed: {
    ...mapGetters('cart', [
      'totalCount',
      'totalPrice'
    ])
  }
}