Vue.js는 유지 관리 및 재사용이 용이한 사용자 인터페이스를 구축할 수 있는 인기 있는 프런트 엔드 프레임워크입니다. 주요 장점 중 하나는 배우고 사용하기가 매우 쉽고 다른 라이브러리 및 프레임워크와 원활하게 작동한다는 것입니다. 그러나 애플리케이션이 점점 더 복잡해지기 시작하면 문제에 직면할 수 있습니다. 전역 상태와 데이터를 어떻게 관리해야 할까요? 이것이 Vuex가 해결하는 문제입니다.
Vuex는 Vue.js용으로 특별히 설계된 상태 관리 라이브러리입니다. 주요 목적은 상태 유지 관리를 보다 쉽게 만드는 것입니다. Vuex는 단일 "데이터 소스"를 제공하고 이를 예측 가능한 방식으로 관리합니다.
이 기사에서는 Vuex의 기본 사항을 소개하고 Vue.js에서 이를 사용하여 전역 상태 및 데이터를 관리하는 방법을 보여줍니다.
Vuex에 대해 알아보기 전에 핵심 개념에 대한 기본적인 이해가 필요합니다.
State는 애플리케이션 상태를 저장하는 객체입니다. Vuex에서 상태는 반응적입니다. 즉, 상태가 변경되면 해당 상태를 사용하는 모든 구성 요소가 자동으로 업데이트됩니다. 일반적으로 상태를 빈 객체로 초기화해야 합니다.
const store = new Vuex.Store({
state: {
count: 0
}
})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을 사용해야 합니다. 이 규칙을 사용하면 모든 상태 변경을 추적하고 이러한 변경이 발생할 때 디버깅하거나 역추적할 수 있습니다. 돌연변이는 동기식이어야 합니다.
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
}
})Action은 비동기 작업을 수행하고 Mutation을 제출하는 데 사용됩니다. 작업에는 API 호출과 같은 비동기 논리가 포함되는 경우가 많습니다. 작업이 호출되면 상태를 직접 변경하는 대신 돌연변이를 커밋합니다.
const store = new Vuex.Store({
state: {
count: 0
},
mutations: {
increment (state) {
state.count++
}
},
actions: {
incrementAsync ({ commit }) {
setTimeout(() => {
commit('increment')
}, 1000)
}
}
})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의 기본 사항을 이해했으므로 Vue.js 애플리케이션에서 이를 사용하는 방법을 살펴보겠습니다.
Vuex를 사용하려면 먼저 프로젝트에 설치하세요. npm을 사용하여 설치할 수 있습니다.
npm install vuex --save
설치 후 Vue.use() 메서드를 호출하여 Vue.js로 구성해야 합니다.
import Vue from 'vue' import Vuex from 'vuex' Vue.use(Vuex)
아주 간단한 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)
}
}
})상태를 변경하려면 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
}
}
})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)
})
})
}
}
})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
}
})Vuex는 Vue.js 애플리케이션의 상태와 데이터를 우아하게 관리하는 데 도움이 되는 매우 강력한 상태 관리 라이브러리입니다. Vuex를 사용하면 구성 요소 간에 데이터를 수동으로 전달하지 않고도 전역 상태에 쉽게 액세스하고 변경할 수 있습니다. 가장 좋은 방법은 필요할 때 주문형으로 Vuex를 사용하는 것입니다. 간단한 애플리케이션의 경우 로컬 구성 요소 상태를 사용하는 것만으로도 요구 사항을 완벽하게 충족할 수 있습니다. 그러나 애플리케이션이 점점 복잡해지면 Vuex를 사용하여 상태를 관리하는 것을 고려할 수 있습니다.
위 내용은 Vuex를 사용하여 Vue에서 글로벌 데이터 및 상태를 관리하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
