Nuxt에서는 자동으로 뷰엑스 라이브러리를 임포트해서 사용할 수 있게 해 준다. 따라서 맨 처음 Nuxt 프로젝트를 create했을 때 store라는 디렉토리가 자동으로 생겨 있는 것을 볼 수 있다.

기존의 그냥 뷰 프로젝트에서 스토어를 생성하고 그 안에 옵션으로 state나 mutations와 같은 속성들을 넣어놓았던 것과는 다르게, 넉스트에서는 그냥 각각을 선언한 후 export하면 된다.

• 기존 뷰 프로젝트에서의 뷰엑스 스토어

넉스트 프로젝트의 뷰엑스 스토어

// @/store/index.js

export const state = () => ({
  cartItems: []
})

export const mutations = {
  addCartItem(**state**, cartItem) {  // **첫번째 인자로 state**
    state.cartItems.push(cartItem)
  }
}

state는 function으로, mutations, getters, actions는 다 object로 리턴한다.

이를 컴포넌트에서 import 없이 그냥 사용하면 된다.

이 때 this의 $store 속성에 접근해서 commit을 통해 뮤테이션을 사용하면 된다.

• 추가 설명

<template>
  ...
</template>
<script>
import { fetchProductById } from '../../api/fetch'

export default {
  ...
  methods: {
    addToCart() {
      **this.$store.commit('addCartItem', this.product)**
      this.$router.push('/cart')
    },
  },
}
</script>

state의 데이터 사용하기

cart.vue에서 state의 데이터를 사용해본다. 똑같이 그냥 $store 안의 state에 접근하면 된다.

<template>
  <div>
    <h1>Cart Page</h1>
    <div>
      <ul>
        <li v-for="cartItem in **$store.state.cartItems**" :key="cartItem.id">
          <img :src="cartItem.imageUrl" :alt="cartItem.name" />
          <p>{{ cartItem.name }}</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'CartPage',
}
</script>

<style scoped></style>

새로고침 문제

새로고침을 누르면 뷰엑스에 등록해 놓았던 state가 모두 사라진다.

뷰엑스는 자바스크립트이다. 자바스크립트는 페이지 새로고침 시 처음부터 다시 실행되는 특성을 지닌다. 따라서 state가 새로고침마다 사라지는 것이다.

이를 해결하는 방법은 두 가지가 있다.

• 브라우저 저장 공간을 이용하기 : localStorage, sessionStorage, Cookie 등