Vuex #1 state

user.vue 의 data에 있는 배열을 store.js 의 state에 옮겨준다.

<template>
  <div>
  
    <v-list two-line>
      <v-list-tile 
        v-for="(user, index) in  this.$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>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: { // vue의 data 역할
 	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: {

  }
})

 

store.js의 state에 선언한 배열을 vue에서

 this.$store.state.allUsers 이런식으로 접근 가능하다.