Vue_10 전역 상태 관리

뮤테이션은 state를 변경하는 useState[test, setTest]의 setTest 같은 거고, (commit 통해 호출) action은 api통신 후 데이터를 가지고 상태 변경을 위해 뮤테이션을 호출하는 놈이고, (dispatch 통해 호출) getter은 react에서 loginState.getToken 처럼 저장된 상태를 다른 컴포넌트에서 꺼내 쓰기 위한 놈

 

 

 

 

• State:
  • 애플리케이션의 중앙 집중식 상태 저장소
  • 예: state: { count: 0, user: null }
• Mutations:
  • State를 변경하는 유일한 방법
  • commit을 통해 호출
  • 예:
    mutations: { INCREMENT(state) { state.count++ } }
  • 컴포넌트에서 사용: this.$store.commit('INCREMENT')
• Actions:
  • 비동기 작업을 처리하고 그 결과로 mutation을 호출
  • dispatch를 통해 호출
  • 예:
    actions: { fetchUser({ commit }) { api.getUser().then(user => { commit('SET_USER', user) }) } }
  • 컴포넌트에서 사용: this.$store.dispatch('fetchUser')
• Getters:
  • 저장된 상태를 계산하거나 필터링하여 가져오는 데 사용
  • 예: 
  • getters: { isLoggedIn: state => !!state.user }
  • 컴포넌트에서 사용: this.$store.getters.isLoggedIn
  • 직접 접근도 가능 "this.$store.state.data"

 

 

---

 

• 액션 디스패치: 

store.dispatch('fetchUser')

• 이 코드는 'fetchUser' 액션을 호출함

호출되면

 

액션이 실행됨

actions: {
  fetchUser({ commit }) {
    api.getUser().then(user => {
      commit('SET_USER', user)
    })
  }
}

 

 

액션은 API 호출을 수행하고, 응답을 받으면 'SET_USER' 뮤테이션을 커밋함

 

커밋하면 뮤테이션 실행됨

mutations: {
  SET_USER(state, user) {
    state.user = user
  }
}

state의 user 값을 업데이트함

 

 

그럼 이제 어디어디에서

store.getters.isLoggedIn

처럼

getter 사용해 꺼내쓰믄 댐

getters: {
  isLoggedIn: state => !!state.user
}

이 getter는 user 객체의 존재 여부를 확인해 로그인 상태를 반환함

getter는 복잡한 가공이 필요할 때만 사용하는 것이며, 단순한 상태 접근에는 필요하지 않습니다.

 

그냥 

this.$store.state.data

로 꺼내쓰믄 댐

∴

• 컴포넌트에서 액션을 디스패치
• 액션은 비동기 작업(예: API 호출)을 수행
• 액션은 작업 결과를 바탕으로 뮤테이션을 커밋
• 뮤테이션은 실제로 상태를 변경
• 변경된 상태는 getter를 통해 접근할 수 있으며, 이는 컴포넌트에서 사용

 

 

 

"프로필 페이지 컴포넌트가 렌더링되는데, 여기에 유저 정보가 필요하네?"

컴포넌트는 "유저 정보 가져와!" 하고 액션을 디스패치

액션이 데이터를 받으면 "자, 이 데이터로 상태 업데이트 해야 해" 하고 뮤테이션을 커밋

뮤테이션은 "OK, 상태 변경했어" 하고 실제로 스토어의 상태를 업데이트

이제 어느 컴포넌트에서든 "유저 정보 어떻게 됐지?" 하고 getter를 통해 업데이트된 상태를 쉽게 가져다 쓰기 ㄱㄴ

 

 

 

 

 

 

---

사용 예)

<template>
  <div>
    <!-- boardId 표시. 이 값은 computed 속성에서 가져옴. -->
    <h1>게시판: {{ boardId }}</h1>
    
    <!-- Vuex getter를 통해 가져온 로그인 사용자 정보를 표시 -->
    <p>로그인 사용자: {{ loggedInUser.name }}</p>
    
    <!-- v-for 디렉티브를 사용하여 posts 배열의 각 항목을 리스트로 렌더링 -->
    <ul>
      <li v-for="post in posts" :key="post.id">{{ post.title }}</li>
    </ul>
  </div>
</template>

<script>
// Vuex의 mapGetters 헬퍼 함수 (Vuex getter 매핑)
import { mapGetters } from 'vuex'
// axios를 가져와 HTTP 요청을 수행
import axios from 'axios'

export default {
  // computed 속성을 정의
  computed: {
    // Vuex의 getter를 컴포넌트의 computed 속성으로 매핑
    ...mapGetters(['loggedInUser']),
    
    // 현재 라우트에서 boardId 파라미터를 가져오(는 computed 속성)
    boardId() {
      return this.$route.params.boardId
    }
  },
  
  // 컴포넌트의 로컬 상태를 정의
  data() {
    return {
      posts: [] // 게시글 목록을 저장할 빈 배열
    }
  },
  
  // 컴포넌트가 생성될 때 실행
  created() {
    this.fetchPosts() // 컴포넌트 생성 시 게시글을 가져옴
  },
  
  // 컴포넌트의 메서드를 정의
  methods: {
    // 게시글을 가져오는 비동기 메서드
    async fetchPosts() {
      try {
        // axios를 사용하여 서버에 GET 요청
        const response = await axios.get(`/api/boards/${this.boardId}/posts`, {
          headers: { Authorization: `Bearer ${this.loggedInUser.token}` } // 인증 토큰을 헤더에 포함
        })
        this.posts = response.data // 응답 데이터를 posts 배열에 할당
      } catch (error) {
        console.error('게시글을 불러오는데 실패했습니다:', error) // 오류 발생 시 콘솔에 오류를 출력
      }
    }
  }
}
</script>