Vuex의 State 및 Getter에 대해 자세히 알아보세요.

Vuex의 내부 기관은 State, Getter, Mutation, Action 및 Module의 다섯 부분으로 구성됩니다. 이 기사는 먼저 Vuex의 State 및 Getter에 대한 심층적인 이해를 제공할 것입니다. 도움이 되기를 바랍니다.

Vuex_State

Vuex는 여러 구성 요소가 상태를 공유하는 것을 더 편리하게 만들기 위한 vue용 상태 관리 도구입니다. [관련 추천: "vue.js Tutorial"]

Install

npm install vuex --save复制代码

Use

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

Vue.use(Vuex);const store = new Vuex.Store({  state: {    count: 0
  }
})new Vue({
  store,
})

State

모든 애플리케이션 수준 상태를 포함하기 위해 하나의 개체를 사용하는 단일 상태 트리입니다.

Vue 구성 요소에서 Vuex 상태 가져오기

Vuex는 저장 옵션(Vue.use(Vuex) 호출)을 통해 구성 요소의 상태를 각 하위 구성 요소에 "주입"하는 메커니즘을 제공합니다.

루트 인스턴스에 store 옵션을 등록하면 루트 컴포넌트 아래의 모든 하위 컴포넌트에 store 인스턴스가 주입되며, 해당 하위 컴포넌트는 this.$store를 통해 접근할 수 있습니다.

1832d1c4a53e5db59fd2eed60b317a8f
  {{ $store.state.count }}16b28748ea4df4d9c2150843fecfba68复制代码

mapState 도우미 기능

구성 요소가 여러 상태를 얻어야 하는 경우 이러한 상태를 계산된 속성으로 선언하는 것은 다소 반복적이고 중복됩니다. 이 문제를 해결하려면 mapState 도우미 함수를 사용하여 계산된 속성을 생성할 수 있습니다.

import { mapState } from 'vuex';

computed: {
  ...mapState(['count']),
},

다른 이름 사용:

computed: {
  ...mapState({
    storeCount: state => state.count,
     // 简写
    storeCount: 'count',  // 等同于 state => state.count
  }),
},

Vuex_Getter

store의 계산된 속성. getter의 반환 값은 종속성에 따라 캐시되며 종속성 값이 변경될 때만 다시 계산됩니다.

Getter는 첫 번째 매개변수로 상태를 받고 두 번째 매개변수로 getter를 받습니다.

getters: {
  doubleCount (state) {    return state.count * 2;
  }
}

속성을 통해 액세스

Getter는 store.getters 객체로 노출됩니다. this.$store.getters.doubleCount

메서드를 통해 액세스

또한 getter가 함수를 반환하여 getter에 매개변수를 전달하도록 할 수도 있습니다

getters: {
  addCount: state => num => state.count + num;
}

this.$store.addCount(3);

mapGetters 보조 함수

import { mapsGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters([
      'doubleCount',
      'addCount',
    ])
  }
}

게터 속성에 다른 이름을 지정하려면 개체 형식을 사용하세요.

mapGetters({
   // 把 `this.doneCount` 映射为 `this.$store.getters.doneTodosCount` 
  storeDoubleCount: 'doubleCount'
})

더 많은 프로그래밍 관련 지식을 보려면 프로그래밍 소개를 방문하세요! !

위 내용은 Vuex의 State 및 Getter에 대해 자세히 알아보세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!