Vuex를 사용하여 Vue에서 전역 상태를 관리하는 실제 공유

Vue는 널리 사용되는 프런트 엔드 프레임워크이며 기본 아이디어는 페이지를 여러 구성 요소로 나누고 각 구성 요소는 고유한 상태를 갖는 것입니다. 그러나 여러 구성 요소 간에 상태를 공유해야 하는 상황이 있습니다. 이러한 상황을 처리하기 위해 Vue는 애플리케이션의 전역 상태를 관리하도록 특별히 설계된 타사 라이브러리인 vuex를 제공합니다. 이 글에서는 Vue 프로젝트에서 vuex를 사용한 몇 가지 실제 경험을 공유하겠습니다.

Vuex란 무엇인가요?

Vuex는 Vue.js의 공식 상태 관리 도구입니다. 중앙 집중식 저장소를 사용하여 단일 개체를 통해 구현된 애플리케이션의 모든 구성 요소 상태를 관리합니다.

Vuex의 핵심 개념은 다음과 같습니다.

• State: 애플리케이션 수준 상태를 저장합니다.
• Getter: 상태에 저장된 값을 가져와서 계산을 수행합니다.
• Mutation: 상태의 값을 변경합니다.
• 작업: 변형을 제출하고 비동기 작업을 수행합니다.
• 모듈: 저장소를 여러 하위 모듈로 분해합니다. 각 모듈은 고유한 상태, 돌연변이, 동작을 가질 수 있습니다.

Vue 프로젝트에서 Vuex 사용

Vue 프로젝트에서 Vuex를 사용하는 프로세스를 보여주기 위해 다음을 만듭니다. 간단한 샘플 애플리케이션을 "ToDo List"라고 부르겠습니다. 이 애플리케이션을 사용하면 작업을 추가 및 제거하고 작업 목록에 표시할 수 있습니다. 아래에서는 Vuex를 사용하여 ToDo List 애플리케이션을 구현하는 방법을 소개합니다.

먼저 Vuex를 사용하려면 Vue 애플리케이션에서 가져와야 합니다. 아래와 같이 main.js에서 Vuex 객체를 가져오고 주입할 수 있습니다.

import Vue from 'vue'
import Vuex from 'vuex'
import App from './App.vue'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    tasks: []
  },
  mutations: {
    addTask(state, task) {
      state.tasks.push(task)
    },
    removeTask(state, index) {
      state.tasks.splice(index, 1)
    }
  }
})

new Vue({
  store,
  render: h => h(App)
}).$mount('#app')

여기서 먼저 Vuex를 가져와서 Vue 객체에 주입합니다. 다음으로 Vuex.Store 생성자를 사용하여 새로운 Vuex 스토리지 인스턴스를 생성하는 store라는 상수를 생성합니다. 여기에서는 상점의 상태와 돌연변이를 정의합니다. 우리의 상태는 ToDo 목록에 작업을 저장하는 작업 배열입니다. 우리의 변형에는 각각 작업을 추가하고 제거하는 데 사용되는 addTask 및 RemoveTask가 포함됩니다.

또한 스토어를 Vue 인스턴스에 삽입하여 애플리케이션의 모든 구성 요소에서 사용할 수 있습니다. 이제 우리 컴포넌트의 스토어에 있는 상태와 변이에 접근할 수 있습니다.

샘플 ToDo List 애플리케이션에는 사용자가 작업을 추가할 수 있는 양식이 포함된 AddTask.vue라는 구성 요소가 있습니다. 이 구성 요소에서는 $store를 사용하여 저장소의 상태와 변형에 액세스하고 addTask 변형을 트리거하여 저장소에 작업을 추가할 수 있습니다. 코드는 다음과 같습니다.

<template>
  <form @submit.prevent="addTask">
    <input type="text" v-model="task" />
    <button type="submit">Add Task</button>
  </form>
</template>

<script>
export default {
  data() {
    return {
      task: ''
    }
  },
  methods: {
    addTask() {
      this.$store.commit('addTask', this.task)
      this.task = ''
    }
  }
}
</script>

여기에서는 컴포넌트에서 양식을 사용하고 있으며, 양식이 제출되면 addTask 메소드를 호출하고 작업 이름을 $store.commit 메소드에 매개변수로 전달합니다. 이는 작업을 저장소에 추가하기 위해 앞서 정의한 addTask 변형을 트리거합니다.

다음으로 작업 목록을 표시하고 사용자가 작업을 삭제할 수 있게 해주는 TasksList.vue 구성 요소가 있습니다. 이 구성 요소에서는 $store를 사용하여 저장소의 상태와 변형에 액세스하고, RemoveTask 변형을 트리거하여 저장소에서 작업을 제거할 수 있습니다. 코드는 다음과 같습니다:

<template>
  <ul>
    <li v-for="(task, index) in tasks" :key="index">
      {{ task }}
      <button @click="removeTask(index)">Remove Task</button>
    </li>
  </ul>
</template>

<script>
export default {
  computed: {
    tasks() {
      return this.$store.state.tasks
    }
  },
  methods: {
    removeTask(index) {
      this.$store.commit('removeTask', index)
    }
  }
}
</script>

여기에서는 계산된 속성을 사용하여 저장소의 작업 배열 상태를 가져옵니다. 또한 템플릿의 v-for 지시어를 사용하여 각 작업을 표시하고 각 작업 뒤에 삭제 버튼을 추가합니다. 사용자가 삭제 버튼을 클릭하면 RemoveTask 메소드를 호출하고 작업 인덱스를 $store.commit 메소드에 매개변수로 전달합니다. 이는 이전에 정의한 RemoveTask 변형을 트리거하여 저장소에서 작업을 제거합니다.

결론

이 기사에서는 Vuex를 사용하여 애플리케이션의 전역 상태를 관리하는 방법을 배웠고 ToDo List 애플리케이션을 통해 Vue 프로젝트에서 실제로 사용하는 방법을 시연했습니다. Vue 프로젝트에서 Vuex를 사용하면 상태를 더 쉽게 관리하고 공유할 수 있으며 코드가 더 모듈화되고 읽기 쉬워집니다. Vue 프로젝트도 개발 중인 경우 Vuex를 사용하여 애플리케이션 상태를 더 잘 관리하는 것을 고려할 수 있습니다!

위 내용은 Vuex를 사용하여 Vue에서 전역 상태를 관리하는 실제 공유의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!