초보자를 위한 Vue.js Vuex를 사용한 VueJs 파트 상태 관리-JS 튜토리얼-php.cn

초보자를 위한 Vue.js Vuex를 사용한 VueJs 파트 상태 관리

Patricia Arquette

풀어 주다： 2024-10-16 12:24:29

원래의

212명이 탐색했습니다.

Vue.js for Beginners VueJs Part State Management with Vuex

Vue.js 애플리케이션의 상태 관리는 앱이 성장함에 따라 복잡해질 수 있습니다. 이번 게시물에서는 Vue.js의 공식 상태 관리 라이브러리인 Vuex를 사용하여 상태를 효과적으로 관리하는 방법을 살펴보겠습니다.

- Vuex란 무엇인가요?
Vuex는 Vue.js 애플리케이션을 위한 상태 관리 패턴 라이브러리입니다. 애플리케이션의 모든 구성 요소에 대한 중앙 집중식 저장소 역할을 하므로 구성 요소 간에 데이터를 더 쉽게 공유할 수 있습니다. 이는 예측 가능한 방식으로 상태를 관리하는 데 도움이 됩니다.

- Vuex 설치
Vuex를 시작하려면 먼저 설치해야 합니다. Vue CLI를 사용하는 경우 프로젝트를 생성할 때 이를 설치하도록 선택할 수 있습니다. 이미 프로젝트가 있다면 npm을 통해 설치하세요:

npm install vuex@next --save

로그인 후 복사

Vuex 설정

- 매장 만들기
src 디렉터리에 store라는 새 폴더를 만들고 해당 폴더 내에 index.js라는 파일을 만듭니다. 이 파일에는 Vuex 스토어 구성이 저장됩니다. 이 예에서는 카운트 값을 더하고 빼는 간단한 저장소를 만들어 보겠습니다.

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    count: 0, // Example state
  },
  mutations: {
    increment(state) {
      state.count++; // Mutates the state
    },
    decrement(state) {
      state.count--; // Mutates the state
    },
  },
  actions: {
    increment({ commit }) {
      commit('increment'); // Commits the mutation
    },
    decrement({ commit }) {
      commit('decrement'); // Commits the mutation
    },
  },
  getters: {
    getCount(state) {
      return state.count; // Access state value
    },
  },
});

로그인 후 복사

- Vuex Store를 애플리케이션에 통합
다음으로 Vuex 스토어를 기본 Vue 인스턴스에 통합합니다. main.js 파일을 편집하세요:

import Vue from 'vue';
import App from './App.vue';
import store from './store'; // Import the store

new Vue({
  el: '#app',
  store, // Add the store to the Vue instance
  render: h => h(App),
});

로그인 후 복사

컴포넌트에서 Vuex 사용

이제 Vuex가 설정되었으므로 구성 요소에서 이를 사용하는 방법을 살펴보겠습니다. 다음은 구성 요소에서 상태에 액세스하고 수정하는 방법에 대한 예입니다.

- 접근 상태
this.$store.state:
를 사용하여 상태에 액세스할 수 있습니다.

<template>
  <div>
    <h1>Count: {{ count }}</h1>
    <button @click="increment">Increment</button>
    <button @click="decrement">Decrement</button>
  </div>
</template>

<script>
export default {
  computed: {
    count() {
      return this.$store.getters.getCount; // Access getter
    },
  },
  methods: {
    increment() {
      this.$store.dispatch('increment'); // Dispatch action
    },
    decrement() {
      this.$store.dispatch('decrement'); // Dispatch action
    },
  },
};
</script>

로그인 후 복사