vue에서 store의 사용법은 무엇입니까?

Vue에서 스토어는 상태를 관리하고, 데이터를 공유하고, 다양한 구성 요소 간의 외부 상태를 관리하는 데 사용됩니다. 스토어는 애플리케이션의 대부분의 상태를 포함하고 변경하는 컨테이너인 Vuex 애플리케이션의 핵심입니다. 유일한 방법은 돌연변이를 제출하는 것입니다.

이 기사의 운영 환경: Windows 10 시스템, Vue 버전 2.9.6, DELL G3 컴퓨터.

vue에서 store의 사용법은 무엇인가요?

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모델입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.

모든 Vuex 애플리케이션의 핵심은 매장(창고)입니다. "저장소"는 기본적으로 애플리케이션의 대부분의 상태를 포함하는 컨테이너입니다. Vuex와 단순 전역 객체 사이에는 두 가지 차이점이 있습니다.

Vuex의 상태 저장소는 반응형입니다. Vue 구성 요소가 저장소에서 상태를 읽을 때 저장소의 상태가 변경되면 해당 구성 요소가 그에 따라 효율적으로 업데이트됩니다.

스토어에서는 상태를 직접 변경할 수 없습니다. 저장소에서 상태를 변경하는 유일한 방법은 명시적으로 변형을 커밋하는 것입니다. 이를 통해 모든 상태 변경을 쉽게 추적할 수 있으며 애플리케이션을 더 잘 이해하는 데 도움이 되는 몇 가지 도구를 구현할 수 있습니다.

store

state의 핵심 개념은 vue 인스턴스의 데이터 속성과 유사하게 매장의 상태를 나타냅니다.

Mutation

Vuex 스토어에서 상태를 변경하는 유일한 방법은 돌연변이를 제출하는 것입니다.

Vuex의 돌연변이는 이벤트와 매우 유사합니다. 각 돌연변이에는 문자열 이벤트 유형(유형)과 콜백 함수(핸들러)가 있습니다. 이 콜백 함수는 실제로 상태를 변경하는 곳이며 상태를 첫 번째 매개변수로 허용합니다.

Action

Action은

Action이 상태를 직접 변경하는 대신 변형을 제출한다는 점을 제외하면 mutation과 유사합니다.

Action에는 모든 비동기 작업이 포함될 수 있습니다.

예시

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment (state) {
      state.count++
    }
  },
  actions: {
    increment (context) {
      context.commit('increment')
    }
  }
})

스토어 사용법

스토어를 사용하기 전에 먼저 vuex를 설치해야 합니다:

npm install vuex

Vuex를 설치한 후 스토어를 생성해 보겠습니다. 생성은 간단합니다. 초기 상태 개체와 일부 변형만 제공하면 됩니다.

새 저장소 폴더를 만든 다음 새 index.js 파일을 만듭니다.

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
    state: {
        count: 0
    },
    mutations: {
        increment(state){
            state.count++;
        }
    }
})

Vue 구성 요소의 this.$store 속성에 액세스하려면 Vue 인스턴스에 대해 생성된 저장소를 제공해야 합니다. Vuex는 루트 구성 요소의 저장소를 저장소 옵션 형태로 모든 하위 구성 요소에 "주입"하는 메커니즘을 제공합니다.

즉, main.js 파일로 가져와서 vue 루트 인스턴스에 등록하세요:

import store from './store'
...
new Vue({
    el: "#app",
    store: store,
...

그런 다음 vue 구성 요소의 메소드 메소드 속성 아래에 있는 store.commit('increment')를 통해 호출할 수 있습니다:

        ...
        methods:{
            increment:function(){
                this.$store.commit("increment");
                console.log(this.$store.state.count);
            },
            ...

효과는 다음과 같습니다:

[관련 추천: "vue.js tutorial"]

위 내용은 vue에서 store의 사용법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!