[Vue.js|json] vuex 사용하기 & json파일 불러오기

1. vuex에서 json 파싱하기

먼저 json파일을 프로젝트 내에 저장합니다.

예시로 쓸 db.json 파일입니다.

{"data":[
	{
		"user":"AAA",
		"genre":"myS",
		"location":"A3",
		"size":"2"
	},
	{
		"user":"BBB",
		"genre":"myS",
		"location":"A13",
		"size":"1"
	},
	{
		"user":"CCC",
		"genre":"myS",
		"location":"B2",
		"size":"2"
	}
]
}

 

 

store폴더 밑에 있는 index.js에서 구현해보겠습니다.

json 데이터 읽기

state

데이터

mutations

state에 저장된 데이터의 상태를 변경할 때 사용합니다.

data라는 변수를 받아서 state에 있는 db에 저장합니다.

actions

component의 methods처럼 불러올 수 있는데, mutations에 대한 commit을 합니다.

예제 db.json과 같은 구조라면 아래처럼 map을 사용하여 data라는 변수에 담습니다.

그리고 mutations에 대한 commit을 하는데 이때, db.json의 데이터를 담은 변수를 전달합니다.

2. component에서 불러오기

위에서 이제 데이터를 state에 저장했습니다.

 

component에서 state의 db를 불러보겠습니다.

<script>
import{ mapActions, mapState } from 'vuex' #1
export default {
  name: 'App',
  mounted(){
      this.init();
  },
  computed:{
      ...mapState({
          data: 'db' //#2
      })
  },
  methods:{
    ...mapActions({
    init: 'dbInit' //#3
    })
  }
 };
</script>

#1 getter 함수를 생성하는 mapState 헬퍼, 컴포넌트 메소드를 store.dispatch 호출에 매핑하는 mapActions 헬퍼를 사용

#2 this.date를 store.state.db에 매핑

#3 this.init()을 this.$store.dispatch('dbInit')에 매핑

 

3. 화면에 출력하기

이제 this.data에 db.json의 데이터가 담겼습니다.

화면에 {{data}}로 데이터를 출력해보았습니다.

 

---

참고

https://kr.vuejs.org/v2/guide/instance.html#Vue-%EC%9D%B8%EC%8A%A4%ED%84%B4%EC%8A%A4-%EB%A7%8C%EB%93%A4%EA%B8%B0

Vue 인스턴스 — Vue.js

https://vuex.vuejs.org/kr/guide/state.html

상태 | Vuex