Vuex

[kureharyosuke]

$store.state.allUsers.length 

  getters: {
    allUsersCount: function (state) {
      return state.allUsers.length;
    },
  },

// Vuex : Store

export default new Vuex.Store({
  //data == state
  state: {
    allUsers: [
      { userId: "hoza123", password: "123", name: "Hoza", address: "Seoul", src: "https://goo.gl/oqLfJR" },
      { userId: "max123", password: "456", name: "Max", address: "Berlin", src: "https://goo.gl/Ksk9B9" },
      { userId: "lego123", password: "789", name: "Lego", address: "Busan", src: "https://goo.gl/x7SpCD" },
    ],
  },
  // computed == getters
  getters: {
    allUsersCount: function (state) {
      return state.allUsers.length;
    },
  },
  mutations: {},
  actions: {},
});

// Components
   <h1>All Users({{ $store.getters.allUsersCount }})</h1>
   <h3>모든 유저수:({{ $store.getters.allUsersCount }})</h3>

[kureharyosuke]

mapGetters

 getters: {
    allUsersCount: (state) => {
      return state.allUsers.length;
    },
    countOfSouel: (state) => {
      // let count = 0;
      // state.allUsers.forEach((user) => {
      //   if (user.address === "Seoul") count++;
      // }
      // return count;

      return state.allUsers.filter((user) => user.address === "Seoul").length;
    },
    percentOfSouel: (state, getters) => {
      // return (state.allUsers.filter((user) => user.address === "Seoul").length / state.allUsers.length) * 100;

      return Math.round((getters.countOfSouel / state.allUsers.length) * 100);
    },
  },

  <template>
  <div>
    <h1>All Users({{ allUsersCount }})</h1>
    <h1>Seoul Users:{{ countOfSouel }}/({{ percentOfSouel }}%)</h1>
    <v-list two-line>
      <v-list-tile v-for="(user, index) in $store.state.allUsers" :key="index" avatar>
        <v-list-tile-avatar color="grey lighten-3">
          <img :src="user.src" />
        </v-list-tile-avatar>

        <v-list-tile-content>
          <v-list-tile-title v-html="user.name"></v-list-tile-title>
          <v-list-tile-sub-title>id:#{{ index }} / {{ user.address }} 거주</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </div>
</template>

<script>
import { EventBus } from "@/main.js";
import { mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapGetters(["allUsersCount", "countOfSouel", "percentOfSouel"]),
  },
  mounted() {
    EventBus.$on("signUp", (users) => {
      this.$store.state.allUsers.push(users);
    });
  },
};
</script>

[kureharyosuke]

  computed: {
    ...mapState(["allUsers"]),
    // ...mapGetters({
    //   count: "allUsersCount",
    //   souel: "countOfSouel",
    //   percent: "percentOfSouel",
    // }),
    ...mapGetters(["allUsersCount", "countOfSouel", "percentOfSouel"]),
  },

<template>
  <div>
    <h1>All Users({{ allUsersCount }})</h1>
    <h1>Seoul Users:{{ countOfSouel }}/({{ percentOfSouel }}%)</h1>
    <v-list two-line>
      <v-list-tile v-for="(user, index) in allUsers" :key="index" avatar>
        <v-list-tile-avatar color="grey lighten-3">
          <img :src="user.src" />
        </v-list-tile-avatar>

        <v-list-tile-content>
          <v-list-tile-title v-html="user.name"></v-list-tile-title>
          <v-list-tile-sub-title>id:#{{ index }} / {{ user.address }} 거주</v-list-tile-sub-title>
        </v-list-tile-content>
      </v-list-tile>
    </v-list>
  </div>
</template>

<script>
import { EventBus } from "@/main.js";
import { mapState, mapGetters } from "vuex";

export default {
  data() {
    return {};
  },
  computed: {
    ...mapState(["allUsers"]),
    // ...mapGetters({
    //   count: "allUsersCount",
    //   souel: "countOfSouel",
    //   percent: "percentOfSouel",
    // }),
    ...mapGetters(["allUsersCount", "countOfSouel", "percentOfSouel"]),
  },
  mounted() {
    EventBus.$on("signUp", (users) => {
      this.$store.state.allUsers.push(users);
    });
  },
};
</script>

[kureharyosuke]

   ...mapMutations(["addUsers"]), //2번 방법
    signUp() {
      let userObj = {
        userId: this.userId,
        password: this.password,
        name: this.name,
        address: this.address,
        src: this.src,
      };
      // EventBus.$emit("signUp", userObj);
      // userObj => payload 위치로 온다.
      // this.$store.commit("addUsers", userObj); //1번 방법
      this.addUsers(userObj); //2번 방법
      this.clearForm();
    },

    1. $store 방식
    this.$store.commit("경로명/함수명", payload);

    2. ...mapMutations 방식
     ...mapMutations(["경로명/함수명"]),
     this.경로명/함수명(payload)

[kureharyosuke]