"더보기"페이징 구현과 상태관리(Vuex, Computed Properties 사용)

ㆍ카테고리 없음

 "더보기" 버튼을 사용해 페이징을 처리하는 방법을 Vuex와 컴퓨티드 프로퍼티를 사용하여 구현하는 방법 기록

Vuex를 사용하여 현재 페이지 상태를 관리하고, 컴퓨티드 프로퍼티를 이용해 데이터를 필터링하고 자동으로 업데이트합니다.

 

Vuex 스토어 설정

Vuex는 Vue.js 애플리케이션의 상태 관리를 위한 중앙 저장소입니다. Vuex를 사용하면 여러 컴포넌트 간에 데이터를 쉽게 공유하고, 애플리케이션 상태를 일관성 있게 관리할 수 있습니다.

 

1. Vuex 스토어 설정

먼저, Vuex 스토어를 설정합니다. store/index.js 파일을 생성하고 다음과 같이 설정합니다:

import Vue from "vue";
import Vuex from "vuex";
import VuexPersistence from "vuex-persist";
import modTechTalks from "@/store/techtalks";
// 생략

Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
    modTechTalks,
// 생략
  },
  plugins: [new VuexPersistence({ storage: window.localStorage }).plugin],
});

 

이 코드는 Vuex 스토어를 설정하고 modTechTalks 모듈을 등록합니다. 또한, VuexPersistence 플러그인을 사용하여 상태를 로컬 스토리지에 저장합니다.

 

2. Tech Talks 모듈 설정

다음으로, src/store/techtalks/index.js 파일을 생성하여 Tech Talks 모듈을 설정합니다:

export default {
  state: {
    current: 1, // 현재 페이지 상태 초기값
  },
  mutations: {
    on__UpdateCurrent(state, payload) {
      state.current = payload; // 현재 페이지 상태 업데이트
    },
  },
  getters: {
    fnGetCurrent(state) {
      return state.current; // 현재 페이지 상태 반환
    },
  },
};

이 모듈은 현재 페이지 상태를 관리하는 간단한 상태, 뮤테이션, 그리고 게터를 포함합니다.

 

 

Vue 애플리케이션에 Vuex 통합

이제 Vuex 스토어를 Vue 애플리케이션에 통합합니다. main.js 파일에서 다음과 같이 설정합니다: 

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // Vuex 스토어를 가져옴

Vue.config.productionTip = false;

new Vue({
  store, // Vuex 스토어 등록
  render: h => h(App),
}).$mount('#app');

 

 

 

EpisodeSection 컴포넌트에서 Vuex 사용

이제 EpisodeSection.vue 컴포넌트에서 Vuex 스토어를 사용하여 현재 페이지 상태를 관리합니다. 또한, 컴퓨티드 프로퍼티를 사용하여 현재 페이지에 해당하는 데이터를 필터링합니다.

<template>
  <section class="row">
    <div class="card__wrapper">
      <div class="card" v-for="(item, index) in loadItem" :key="index">
        <div class="flexBox">
          <div class="span__wrap">
            <span v-if="item.num">{{ $t("[7].section.span") }} {{ $t(item.num) }}</span>
          </div>
          <div class="image">
            <img :src="imgUrl" alt="techtalks image" />
          </div>
          <div class="text">
            <div class="topicRow">
              <h3>{{ $t(item.topic) }}</h3>
              <a :href="item.href" target="_blank"><i :class="item.iconClass"></i></a>
            </div>
            <h4>{{ $t("[7].section.h4") }} : {{ $t(item.guest) }}</h4>
            <p>{{ $t(item.content) }}</p>
          </div>
        </div>
      </div>
      <button class="loadMore" @click="loadMore">{{ $t("[7].section.leadmore") }}</button>
    </div>
  </section>
</template>

<script>
export default {
  name: "EpisodeSection",
  data() {
    return {
      episodes: [
        // 에피소드 데이터 목록
      ],
      itemsPerPage: 4, // 페이지당 항목 수
      imgUrl: "./assets/images/techtalks/ep1.jpg", // 기본 이미지 URL
    };
  },
  props: ["keyword"], // 검색어를 받을 prop
  computed: {
    loadItem() {
      // Vuex에서 현재 페이지 상태 가져오기
      this.currentPage = this.$store.getters.fnGetCurrent;

      if (!this.keyword) {
        // 검색어가 없을 경우 전체 에피소드 데이터 중에서 현재 페이지에 해당하는 항목을 반환
        return this.episodes.filter(
          (item, index) => index < this.itemsPerPage * this.currentPage
        );
      } else {
        // 검색어가 있을 경우 필터링된 에피소드 데이터를 반환
        let items = this.episodes.filter(
          (item) =>
            this.$t(item.topic).indexOf(this.keyword) > -1 ||
            this.$t(item.content).indexOf(this.keyword) > -1 ||
            this.$t(item.guest).indexOf(this.keyword) > -1 ||
            item.iconClass.indexOf(this.keyword) > -1
        );
        return items.filter(
          (item, index) => index < this.itemsPerPage * this.currentPage
        );
      }
    },
  },
  methods: {
    loadMore() {
      // Vuex에서 현재 페이지 상태 가져오기
      this.currentPage = this.$store.getters.fnGetCurrent;
      // Vuex를 통해 현재 페이지 상태 업데이트
      this.$store.commit("on__UpdateCurrent", ++this.currentPage);
    },
  },
};
</script>

 

1. Vuex 상태 사용

  • computed 속성에서 this.$store.getters.fnGetCurrent를 사용하여 Vuex에서 현재 페이지 상태를 가져옵니다.
  • methods 속성에서 this.$store.commit("on__UpdateCurrent", ++this.currentPage)를 사용하여 Vuex에서 현재 페이지 상태를 업데이트합니다

2. 컴퓨티드 프로퍼티

  • computed 속성은 loadItem이라는 컴퓨티드 프로퍼티를 정의합니다. 이 프로퍼티는 현재 페이지와 검색어를 기반으로 필터링된 에피소드 데이터를 반환합니다.
  • 컴퓨티드 프로퍼티는 종속된 데이터가 변경될 때 자동으로 재계산되어 최신 값을 유지합니다. 종속된 데이터가 변경되지 않으면 캐싱된 값을 반환하여 불필요한 재계산을 피할 수 있습니다.

 

 

저작자표시 비영리 변경금지

티스토리툴바