Por ejemplo, tengo dos listas: ingresos y resultados. Y tengo dos almacenamientos (uno para ingresos y otro para resultados). Estoy agregando estos almacenamientos en módulos en index.js.
Puedo crear un repositorio para estos ingresos y resultados, mostrarlo en la lista y calcularlo. Pero quiero hacer una tienda separada para cada uno.
Ahora la pregunta es: ¿Cómo puedo implementar esto correctamente? Aproximadamente lo hice. Pero aquí muestro y calculo solo INGRESOS y listo.
¿Cómo hacerlo mejor? importar a través de ...mapGetters dos almacenamientos en un componente para calcular y mostrar en la lista? O tome datos de dos almacenamientos y calcule todo en index.js. Luego, tome estos datos de index.js? ¿Cómo uso múltiples módulos en un componente? Quiero mostrar el saldo de ingresos y resultados en un componente y mostrarlo en la lista.
índice.js
import Vue from "vue"; import Vuex from "vuex"; import income from "./modules/income"; import outcome from "./modules/outcome"; Vue.use(Vuex); export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: { income, outcome, }, });ingresos.js
import Vue from "vue"; const income = { namespaced: true, state: { list: { 1: { type: "INCOME", value: 100, comment: "Some comment", id: 1, }, }, }, getters: { incomeList: ({ list }) => list, }, mutations: { }, actions: { }, }, }; export default income;resultado.js
// import Vue from "vue"; const outcome = { namespaced: true, state: { list: { 1: { type: "OUTCOME", value: -50, comment: "Some outcome comment", id: 2, }, }, }, getters: { outcomeList: ({ list }) => list, }, mutations: { }, actions: { }, }; export default outcome;este es mi componente donde calculo el saldo
<template> <div class="total-value" :style="balanceColor"> Balance: {{ totalBalance }} </div> </template> <script> import {mapGetters} from 'vuex'; export default { name: 'TBalance', computed: { balanceColor: function() { return { color: this.totalBalance === 0 ? 'black' : this.totalBalance > 0 ? 'green' : 'red' } }, totalBalance() { return Object.values(this.incomeList).reduce((acc, item) => acc + item.value, 0) }, ...mapGetters("income", ["incomeList"]), }, methods: { } } </script>También puse el cálculo en el captador, lo que hace que su componente quede limpio. Intente llevar la lógica a la tienda para que pueda usar el monto del saldo en cualquier lugar.
índice.js
import Vue from "vue"; import Vuex from "vuex"; import income from "./modules/income"; import outcome from "./modules/outcome"; Vue.use(Vuex); export default new Vuex.Store({ state: {}, mutations: {}, actions: {}, modules: { income, outcome, }, });ingresos.js
const income = { namespaced: true, state: { list: { 1: { type: "INCOME", value: 100, comment: "Some comment", id: 1, }, }, }, getters: { incomeBalance: state => { // also, you can move this function into a separate file, and reuse return Object.values(state.list).reduce((acc, item) => acc + item.value, 0); }, }, }; export default income;resultado.js
const outcome = { namespaced: true, state: { list: { 1: { type: "OUTCOME", value: -50, comment: "Some outcome comment", id: 2, }, }, }, getters: { outcomeBalance: state => { return Object.values(state.list).reduce((acc, item) => acc + item.value, 0); }, }, }; export default outcome;es tu componente
<template> <div class="total-value" :style="balanceColor">Balance: {{ incomeBalance }}</div> </template> <script> import { mapGetters, mapState } from 'vuex'; export default { name: 'TBalance', computed: { ...mapState('outcome', ['list']), // if you want a list here i added for example ...mapState('income', ['list']), // if you want a list here i added for example ...mapGetters('outcome', ['outcomeBalance']), // also added it for example ...mapGetters('income', ['incomeBalance']), balanceColor() { return { color: this.incomeBalance === 0 ? 'black' : this.incomeBalance > 0 ? 'green' : 'red', }; }, }, methods: {}, }; </script>