vue.js - 상태 변수 클린 코드

• 한 상태 변수가 객체를 가진 배열 형태일 시에 너무 코드가 길어지는 문제가 발생한다.
• 이럴 땐 src/assets 폴더 내부에 js 파일을 만들고 해당 상태 변수를 정의해준다. 이후 export와 import를 적절히 사용해서 App.vue에서 상태 변수에 대입해주면 된다.

예제

<script>
import movies from './assets/movies'

export default {
  name: 'App',
  data() {
    return {
      isModal: false,
      datas: movies,
    }
  },
  methods: {
    increseLike(idx) {
      this.datas[idx].like += 1;
    }
  },
}
</script>

// movies.js
const data = [
    {
        title: "노량",
        year: 2023,
        category: "액션, 드라마",
        textRed: "color: red",
        like: 0,
        imgUrl: '/assets/노량.jpg',
    },
    {
        title: "아쿠아맨과 로스트 킹덤",
        year: 2023,
        category: "액션, 판타지, 어드벤처",
        like: 0,
        imgUrl: '/assets/아쿠아맨.jpg',
    },
    {
        title: "3일의 휴가",
        year: 2023,
        category: "판타지, 드라마",
        like: 0,
        imgUrl: '/assets/3일의휴가.jpg',
    },
]

export default data