VUEX-STORE 모듈 이해 방법

VUEX-STORE 모듈 이해 방법

예를 들어, 저는 수입과 결과라는 두 가지 목록이 있습니다.그리고 나는 두 개의 저장고를 가지고 있다(하나는 수입을 위한 저장고, 다른 하나는 결과를 위한 저장고).모듈의 이러한 스토리지를 index.js에 추가합니다.

저는 이러한 수입과 결과에 대한 하나의 저장소를 만들어서 목록에 표시하고 계산할 수 있습니다.하지만 각각 따로 가게를 만들고 싶어요.

이제 질문은 다음과 같습니다.이 기능을 올바르게 구현하려면 어떻게 해야 합니까?대충 했어요.하지만 여기서는 수입만을 표시하고 계산하면 끝입니다.

어떻게 하면 더 잘할 수 있을까?...map을 통해 가져오기한 구성 요소에서 계산하여 목록에 표시할 두 개의 저장소를 가져오시겠습니까?또는 두 개의 저장소에서 데이터를 가져와 index.js의 모든 데이터를 계산합니다.그럼 인덱스에서 이 데이터를 가져오시겠습니까?1개의 컴포넌트에 여러 모듈을 사용하는 방법수입과 결과의 균형을 하나의 구성요소로 보여 주고 목록에 표시하고 싶습니다.

index.displaces를 표시합니다.

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,
  },
});

income.income.discluse

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;

결과.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;

이것은 잔액을 계산하는 나의 구성요소이다.

<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>

다음은 모듈을 포함한 스토어를 보다 정확하게 사용하기 위한 옵션입니다.

계산도 getter에 넣어두기 때문에 컴포넌트가 깨끗해집니다.잔액을 어디에나 사용할 수 있도록, 가게에 논리를 가져오도록 해 주세요.

index.displaces를 표시합니다.

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,
  },
});

---

income.income.discluse

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;

---

결과.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;

---

고객님의 컴포넌트입니다.

<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>

언급URL : https://stackoverflow.com/questions/69402734/how-to-understand-the-modules-in-the-vuex-store