>웹 프론트엔드 >View.js >상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

青灯夜游
青灯夜游앞으로
2022-08-24 10:42:462354검색

상태관리란 무엇인가요? 다음 기사에서는 Vuex 상태 관리를 안내하고 상태 관리에 Vuex를 사용하는 방법에 대해 설명합니다.

상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

? 1. 상태 관리란 무엇입니까

개발 중에 애플리케이션은 다양한 데이터를 처리해야 하며, 이를 애플리케이션의 특정 위치에 저장해야 합니다. 이를 위해 관리를 상태 관리라고 부릅니다. . (학습 동영상 공유: vue 동영상 튜토리얼)

상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

Vuex 상태 관리의 기본 구현(여기서는 공식 일러스트레이션이 사용됨)

상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

⏰ Vuex 사용

1. 으아악

2. 기본 사용법:

store는 본질적으로 컨테이너입니다. --> 대부분의 애플리케이션 상태를 저장합니다.

vuex의 상태 저장소는 반응형입니다. 저장소의 상태가 변경되면 응답하는 구성 요소도 업데이트됩니다.

npm install vuex
// main.js
import { createApp } from "vue"
import App from "./App.vue"
import store from "./store"

const app = createApp(App)

app.user(store)
app.mount("#app")
// src/store/index.js
import { createStore } from "vuex"

const store = createStore({
  state: () => ({
    counter: 100
  }),
  mutations: {
    increment(state) {
      state.counter++
    }
  }
})
export default store

? 단일 상태 트리 및 mapState 보조 기능

1. 단일 상태 트리

는 각 애플리케이션에 하나의

store 인스턴스만 포함됨을 의미합니다.

장점: 상태 정보에 여러 개가 포함된 경우 Store 인스턴스 객체이기 때문에 나중에 유지하고 관리하기가 더 번거롭습니다.

단일 상태 트리는 특정 상태의 조각을 찾는 가장 직접적인 방법이므로 유지 관리가 더 편리합니다.

2. mapState 보조 기능

여러 상태를 얻어야 하는 경우 mapSate 보조 기능

여기에는 optionsAPI 및 구성 API에서 mapState를 사용하는 두 가지 방법이 있습니다

상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

getter의 기본 사용

1 시나리오: 언제 일련의 변경 후에 스토어의 일부 속성이 사용됩니다. 이때 getters

2를 사용하도록 선택할 수 있습니다. getters의 두 번째 매개변수상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

위 시나리오에서 첫 번째 매개변수는 accept by getters 상태이고 getter도 두 번째 매개변수를 받을 수 있습니다

3. getter의 반환 함수(이해)상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

getter의 함수 자체가 함수를 반환할 수 있으므로 사용되는 곳에서는 이는 이 함수를 호출하는 것과 같습니다

4. mapGetters의 보조 함수 상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

? Mutation은 기본적으로 상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

를 사용합니다.

참고: 피니아에서는 돌연변이 취소입니다. 이에 대해서는 나중에 계속 이야기하겠습니다. vue3을 사용한 구성 API는 vuex보다 우수하므로 여기서는 옵션 API를 사용하여 설명합니다

상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

1. 돌연변이는 데이터를 전달합니다상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

우리는 돌연변이를 제출할 때 일부 데이터를 전달합니다. 이때는 이렇게 사용할 수 있습니다

2. Mutation의 중요 원칙 상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

mutation은 동기 기능이어야 합니다 즉, 비동기 기능(예: 네트워크 요청 전송)은 허용되지 않습니다

? 액션의 기본 사용법은 비슷합니다.

액션은 상태를 직접 변경하는 대신 돌연변이를 제출합니다. 액션은

모든 비동기

작업을

  • 매개변수로 포함할 수 있습니다. 상황
  • :
    • context는 저장소 인스턴스와 동일한 메서드와 속성을 가진 컨텍스트 개체입니다.
    • 여기에서 커밋 메서드를 가져와서 변이를 제출하거나 context.state 및 context.getters를 통해 상태 및 getter를 가져올 수 있습니다.
    1. 액션의 배포 작업

    상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

    상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

    2. 액션의 보조 기능

    상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

    3.

    ?모듈의 기본 사용법

    단일 상태 트리를 사용하기 때문에 애플리케이션의 모든 상태가 상대적으로 큰 개체에 집중됩니다. 애플리케이션이 매우 복잡해지면 저장소 개체가 상당히 커질 수 있습니다. 따라서 Vuex를 사용하면 저장소를 모듈로 분할할 수 있습니다. 상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

    각 모듈에는 자체 상태, 변형, 액션, getter 및 중첩된 하위 모듈도 있습니다

    1. 모듈의 로컬 상태

    모듈 내부의 변형 및 게터의 경우 수신된 첫 번째 매개변수는 모듈 로컬 상태입니다. 물체.

    2. 모듈 네임스페이스

    상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.기본적으로 모듈 내부의 작업과 변형은 여전히 ​​전역 네임스페이스에 등록됩니다.

    그래서 이름을 반복할 수 없습니다

    모듈의 캡슐화 및 재사용 가능성을 높이려면 네임스페이스를 추가하여 네임스페이스가 있는 모듈로 만들 수 있습니다. 모듈이 등록되면 모든 getter, 작업 돌연변이는 모듈에 등록된 경로에 따라 자동으로 이름을 조정합니다.

    3. 루트 구성 요소를 수정하거나 배포합니다. 액션에서 루트의 상태를 수정하면 다음과 같은 방법이 있습니다.

    (동영상 공유 학습:

    웹 프론트엔드 개발

    ,

    기본 프로그래밍 영상

    ) 상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.

위 내용은 상태 관리란 무엇입니까? 상태 관리를 위해 Vuex를 사용하는 방법에 대해 이야기해 보겠습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
이 기사는 csdn.net에서 복제됩니다. 침해가 있는 경우 admin@php.cn으로 문의하시기 바랍니다. 삭제