Vuex 기초배우기 #2 (state)

state는 data

 

 

 

 

 

vuex의 store는 자주 사용할 데이터들을 관리하는 상태 관리 라이브러리이다.

(게임에서 창고 같은 거, 어디서나 필요한 것들을 꺼내쓸 수 있다)

 

 

먼저 AllUsers.vue에 있는 allUsers 배열은 사용자들의 정보를 담고 있었다.

store로 보내기 딱 좋다.

 

Allusers.vue의 data()에서 allUsers 배열을 store로 옮긴다.

 

 

src/store.js

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  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",
      },
    ],
  },
  mutations: {},
  actions: {},
});

state는 data들을 담아놓는 곳이다.
배열도 data이기에 state에 그대로 옮겨놓으면 된다.

 

 

이제 store에 있는 allUsers 배열에 대한 정보를 편하게 꺼내서 쓰면 된다.

 

이때 사용하는 법이 있다.

 

src/main.js

import Vue from 'vue'
import './plugins/vuetify'
import App from './App.vue'
import router from './router'
import store from './store'

Vue.config.productionTip = false

export const EventBus = new Vue()

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

 

 

 

앞서 vuex와 이를 사용하기 위한 store를 main.js에서 선언해주었다.

 

선언된 위치는 Vue 인스턴스이다.

 

그렇기에 Vue인스턴스에 접근하여 store를 사용하기 위해서는 $ 를 사용하여 접근한다

 

 

src/components/Users/AllUsers.vue

<template>
  <div>
    <h1>All Users</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";

export default {
  data() {
    return {};
  },
  mounted() {
    EventBus.$on("signUp", (users) => {
      this.$store.state.allUsers.push(users);
    });
  },
};
</script>

현재 allUsers 배열은 state안에 있기 때문에
$store.state.allUsers로 접근하였다

 

 

data를 store에 저장하고 싶다면 state

 

기억하자