如何理解 VUEX-STORE 中的模块

Question

例如，我有两个列表：收入和结果。我有两个存储（一个用于收入，一个用于结果）。我正在将模块中的这些存储添加到 index.js 中。

我可以为这些收入和结果创建一个存储库，将其显示在列表中并进行计算。但我想为每个单独的商店。

现在的问题是：我怎样才能正确地实现它？我大致做到了。但在这里我只显示和计算INCOME，仅此而已。

如何做得更好？通过 ...mapGetters 在一个组件中导入两个存储以计算并显示在列表中？或者从两个存储中获取数据，并计算 index.js 中的所有内容。然后从 index.js 中获取这些数据？如何在一个组件中使用多个模块？我想在一个组件中显示收入和结果的平衡并显示在列表中。

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

收入.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;

结果.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>

Answer 1

这是一个更正确地使用带有模块的商店的选项。

我还将计算放在 getter 中，这会使您的组件变得干净。 尝试将逻辑带到商店，以便您可以在任何地方使用余额。

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

---

收入.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;

---

结果.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>