지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > View.js > Vuex를 사용하여 Vue에서 글로벌 데이터 및 상태를 관리하는 방법

Vuex를 사용하여 Vue에서 글로벌 데이터 및 상태를 관리하는 방법

WBOY
풀어 주다： 2023-06-11 10:21:29
원래의
1215명이 탐색했습니다.

Vue.js는 유지 관리 및 재사용이 용이한 사용자 인터페이스를 구축할 수 있는 인기 있는 프런트 엔드 프레임워크입니다. 주요 장점 중 하나는 배우고 사용하기가 매우 쉽고 다른 라이브러리 및 프레임워크와 원활하게 작동한다는 것입니다. 그러나 애플리케이션이 점점 더 복잡해지기 시작하면 문제에 직면할 수 있습니다. 전역 상태와 데이터를 어떻게 관리해야 할까요? 이것이 Vuex가 해결하는 문제입니다.

Vuex는 Vue.js용으로 특별히 설계된 상태 관리 라이브러리입니다. 주요 목적은 상태 유지 관리를 보다 쉽게 ​​만드는 것입니다. Vuex는 단일 "데이터 소스"를 제공하고 이를 예측 가능한 방식으로 관리합니다.

이 기사에서는 Vuex의 기본 사항을 소개하고 Vue.js에서 이를 사용하여 전역 상태 및 데이터를 관리하는 방법을 보여줍니다.

Vuex의 기본

Vuex에 대해 알아보기 전에 핵심 개념에 대한 기본적인 이해가 필요합니다.

State

State는 애플리케이션 상태를 저장하는 객체입니다. Vuex에서 상태는 반응적입니다. 즉, 상태가 변경되면 해당 상태를 사용하는 모든 구성 요소가 자동으로 업데이트됩니다. 일반적으로 상태를 빈 객체로 초기화해야 합니다. 

const store = new Vuex.Store({
    state: {
        count: 0
    }
})
로그인 후 복사

Getter

Getter는 상태에서 데이터를 가져오는 데 사용되는 함수입니다. 상태를 계산하거나 필터링해야 할 때 Getter를 사용할 수 있습니다. getter는 상태를 첫 번째 매개변수로 받아들입니다. 게터는 계산된 속성이나 함수일 수 있습니다. 

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false }
        ]
    },
    getters: {
        doneTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        todoById: (state) => (id) => {
            return state.todos.find(todo => todo.id === id)
        }
    }
})
로그인 후 복사

Mutation

Mutation은 상태를 변경하는 데 사용됩니다. 상태를 변경할 때는 상태를 직접 변경하는 대신 Mutation을 사용해야 합니다. 이 규칙을 사용하면 모든 상태 변경을 추적하고 이러한 변경이 발생할 때 디버깅하거나 역추적할 수 있습니다. 돌연변이는 동기식이어야 합니다. 

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    }
})
로그인 후 복사

Action

Action은 비동기 작업을 수행하고 Mutation을 제출하는 데 사용됩니다. 작업에는 API 호출과 같은 비동기 논리가 포함되는 경우가 많습니다. 작업이 호출되면 상태를 직접 변경하는 대신 돌연변이를 커밋합니다. 

const store = new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
})
로그인 후 복사

Module

Vuex 애플리케이션에는 일반적으로 큰 상태 트리가 있습니다. 상태 트리를 유지 관리할 수 있도록 여러 개의 개별 모듈로 나눌 수 있습니다. 모듈을 사용하면 코드를 쉽게 구성하고 상태를 격리할 수 있습니다. 

const counterModule = {
    state: {
        count: 0
    },
    mutations: {
        increment (state) {
            state.count++
        }
    },
    actions: {
        incrementAsync ({ commit }) {
            setTimeout(() => {
                commit('increment')
            }, 1000)
        }
    }
}

const store = new Vuex.Store({
    modules: {
        counter: counterModule
    }
})
로그인 후 복사

Vuex로 전역 상태 관리

이제 Vuex의 기본 사항을 이해했으므로 Vue.js 애플리케이션에서 이를 사용하는 방법을 살펴보겠습니다.

Vuex 설치

Vuex를 사용하려면 먼저 프로젝트에 설치하세요. npm을 사용하여 설치할 수 있습니다. 

npm install vuex --save
로그인 후 복사

설치 후 Vue.use() 메서드를 호출하여 Vue.js로 구성해야 합니다. 

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

Vue.use(Vuex)
로그인 후 복사

Define State

아주 간단한 Todo List 애플리케이션을 만들어 보겠습니다. Vue.js와 함께 Vuex를 사용하는 방법.

먼저 초기 상태를 정의해야 합니다. 이 경우 할 일 배열을 정의합니다. 

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    }
})
로그인 후 복사

상태 가져오기

이제 상태를 정의했으므로 Getter를 사용하여 상태를 가져오는 방법을 살펴보겠습니다.

Getter를 사용하면 상태에서 데이터를 가져와 계산을 수행할 수 있습니다. Todo List 애플리케이션에서는 Getter를 사용하여 특정 상태나 완료되거나 완료되지 않은 할일을 가져올 수 있습니다. 

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    }
})
로그인 후 복사

Change State

상태를 변경하려면 Mutation을 사용해야 합니다. 애플리케이션에 따라 Todo 추가 및 완료 상태 전환이라는 두 가지 Mutation을 정의할 수 있습니다. 

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    }
})
로그인 후 복사

Execute Actions

Todo List 애플리케이션에서는 일부 비동기 작업을 수행해야 할 수도 있습니다. 예를 들어 서버에서 할 일을 가져오려면 비동기 작업을 사용해야 합니다. 

const store = new Vuex.Store({
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
})
로그인 후 복사

Using Modules

Vuex 상태가 더 복잡해지면 이를 여러 모듈로 분할해야 할 수도 있습니다.

우리 애플리케이션에서는 Todo List 애플리케이션 상태를 Todo와 User라는 두 개의 모듈로 나눌 수 있습니다. Todo 모듈에는 Todo 목록 데이터 및 관련 작업이 포함되어 있습니다. 사용자 모듈에는 사용자 정보가 포함되어 있습니다. 

const todoModule = {
    state: {
        todos: [
            { id: 1, text: 'Todo 1', done: true },
            { id: 2, text: 'Todo 2', done: false },
            { id: 3, text: 'Todo 3', done: true }
        ]
    },
    getters: {
        allTodos: state => {
            return state.todos
        },
        completedTodos: state => {
            return state.todos.filter(todo => todo.done)
        },
        incompleteTodos: state => {
            return state.todos.filter(todo => !todo.done)
        }
    },
    mutations: {
        addTodo: (state, todo) => {
            state.todos.push(todo)
        },
        toggleTodo: (state, id) => {
            const todo = state.todos.find(todo => todo.id === id)
            todo.done = !todo.done
        }
    },
    actions: {
        loadTodos: ({ commit }) => {
            api.getTodos(todos => {
                todos.forEach(todo => {
                    commit('addTodo', todo)
                })
            })
        }
    }
}

const userModule = {
    state: {
        user: null
    },
    mutations: {
        setUser: (state, user) => {
            state.user = user
        },
        clearUser: (state) => {
            state.user = null
        }
    },
    actions: {
        login: ({ commit }, user) => {
            api.login(user, () => {
                commit('setUser', user)
            })
        },
        logout: ({ commit }) => {
            api.logout(() => {
                commit('clearUser')
            })
        }
    }
}

const store = new Vuex.Store({
    modules: {
        todo: todoModule,
        user: userModule
    }
})
로그인 후 복사

Summary

Vuex는 Vue.js 애플리케이션의 상태와 데이터를 우아하게 관리하는 데 도움이 되는 매우 강력한 상태 관리 라이브러리입니다. Vuex를 사용하면 구성 요소 간에 데이터를 수동으로 전달하지 않고도 전역 상태에 쉽게 액세스하고 변경할 수 있습니다. 가장 좋은 방법은 필요할 때 주문형으로 Vuex를 사용하는 것입니다. 간단한 애플리케이션의 경우 로컬 구성 요소 상태를 사용하는 것만으로도 요구 사항을 완벽하게 충족할 수 있습니다. 그러나 애플리케이션이 점점 복잡해지면 Vuex를 사용하여 상태를 관리하는 것을 고려할 수 있습니다.

위 내용은 Vuex를 사용하여 Vue에서 글로벌 데이터 및 상태를 관리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

관련 라벨：
vue vuex 状态管理
원천：php.cn
이전 기사：Vue.comComponent를 사용하여 Vue에 전역 구성 요소를 등록하는 방법 다음 기사：Vue의 $forceUpdate 강제 업데이트
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
템플릿의 메서드에 정의된 변수 사용 Vue(v3가 아닌 v2)를 사용하는 것은 이번이 처음이고 템플릿(메소드 내부에 정의됨) 내에서 변수를 사용하려고 노력해 왔습니다. 내 단순화된 코드: <t...
에서 2024-04-06 18:10:25
0
2
513
로그인하지 않고 Firebase를 사용하여 Vue에서 사용자 만들기 사용자 프로필을 생성하기 위한 양식을 만들었습니다. 하지만 사용자를 만들 때마다 문제가 발생합니다. 로그인 및 로그아웃된 사용자입니다. 이 문제를 해결하는 데 도...
에서 2024-04-06 14:20:12
0
1
514
Vue3 웹 구성요소 프로덕션 빌드 문제 해결 vue2web 구성요소를 vue3으로 마이그레이션하려고 하는데 프로덕션용 빌드를 생성할 때 문제가 발생합니다. --targetwc와 함께 vue-cli를 사용하고...
에서 2024-04-06 12:43:37
0
1
473
vue vee-validate는 날짜 선택기 선택 문제를 포착합니다. 내 datepicker 필드의 v-model 바인딩이 제대로 작동하지 않습니다. 선택하면 화면에 실시간으로 업데이트되지만 formValues ​​반응형 개체에 값...
에서 2024-04-06 11:38:56
0
1
510
vue에서 경로 소품을 설정하는 방법이 있나요? this.$router.push({name:"AdminNotifications",params:{tab:"requests"},}...
에서 2024-04-06 11:35:59
0
1
456
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿