state

μƒνƒœ(state)λŠ” μ—¬λŸ¬ μ»΄ν¬λ„ŒνŠΈ 간에 κ³΅μœ λ˜λŠ” 데이터λ₯Ό μ˜λ―Έν•©λ‹ˆλ‹€.

state μ„ μ–Έ

μƒνƒœλŠ” μ•„λž˜μ™€ 같이 μ •μ˜ν•©λ‹ˆλ‹€.

new Vuex.Store({
  state: {
    message: 'Hello Vue.js'
  }
})

μœ„ μ½”λ“œλŠ” message λΌλŠ” μƒνƒœ 값을 μ •μ˜ν•œ μ½”λ“œμž…λ‹ˆλ‹€.

state μ ‘κ·Ό

μœ„ message μƒνƒœ 값을 μ»΄ν¬λ„ŒνŠΈμ—μ„œ μ ‘κ·Όν•˜κΈ° μœ„ν•΄μ„œλŠ” μ•„λž˜μ™€ 같이 μ½”λ”©ν•©λ‹ˆλ‹€.

<div>{{ this.$store.state.message }}</div>

μ½”λ“œλ₯Ό μ‹€ν–‰ν•˜λ©΄ 화면에 Hello Vue.jsκ°€ 좜λ ₯λ©λ‹ˆλ‹€.

아직 감이 μ•ˆμž‘νžˆμ‹ λ‹€λ©΄ ν…œν”Œλ¦Ώ 문법 μ±•ν„°μ—μ„œ Hello Vue.jsλ₯Ό 좜λ ₯ν•˜λŠ” μ½”λ“œμ™€ μœ„μ˜ μ½”λ“œλ₯Ό λΉ„κ΅ν•΄λ³΄μ„Έμš”.