Vuex의 공통 지식 포인트(요약)

이전에 vue.js를 사용해 본 적이 있다면 vue에서 구성 요소 간 값을 전송하는 데 따른 어려움을 알아야 합니다. vuex를 사용하여 관리해야 하는 상태 값을 저장해 보겠습니다. 아래를 살펴보세요. vuex에서 일반적으로 사용되는 몇 가지 지식 포인트가 모든 사람에게 도움이 되기를 바랍니다.

1. Vuex를 사용하는 이유

1. 여러 구성 요소가 동일한 상태에 의존하므로 다중 레이어 중첩 구성 요소와 같은 구성 요소 간의 통신 방법을 사용하는 것은 매우 번거롭습니다.

2. 사용자, 권한 정보, 전역 시스템 설정 등 전역적으로 저장해야 하는 데이터

2. Vuex의 5가지 핵심 속성

1. 상태: 저장 상태

// store.jsconst store = new Vuex.Store({
  state: {
    count: 0
  }});// 组件里获取count值$store.state.count

2. 첫 번째 매개변수와 다른 getter를 두 번째 매개변수로 사용합니다. 반환 값은 종속성에 따라 캐시됩니다. 이는 Vue의 계산된 속성

// store.jsconst store = new Vuex.Store({
  state: {
    count: 1，
    sum: 2
  },
  getters: {
    getCountAndSum： (state,getters) => {
      return state.count + state.sum;
    }
  }});// 其他组件获取getter$store.getters.getCountAndSum

3과 동일합니다. 변형: 상태(동기식)를 첫 번째 매개변수로 수정합니다. 두 번째 매개변수로 로드를 제출합니다

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  }});// 其他组件调用mutations的方法$store.commit('increment', {n: 100});

4. 작업: 비동기 작업(상태를 직접 변경하는 것이 아닌 변형을 수행하는 방법)

const store = new Vuex.Store({
  state: {
    count: 1 
  },
  mutations: {
    increment (state, obj) {
      state.count += obj.n;
    }
  },
  actions: {
    increment (context) {
      context.commit('increment');
    }
  }});// 其他组件调用actions的方法$store.dispatch('increment');

5. 모듈: 저장소의 하위 모듈

const a = {
  state: {
    count: 0
  },
  getters: {
    getCount2 (state, getters, rootState) {
      return state.count + 2;
    }
  },
  mutations: {
    increment (state, getters, rootState) {
      state.count++;  
    }
  },
  actions: {
    increment (context) {
      // context.state.count;
      // context.rootState.count;
      context.commit('increment');
    }
  }};const b = {};const store = new Vuex.Store({
  modules: {
     a,
     b  }});// 其他组件调用 （获取state的变量需要加上引入的module的别名)$store.state.a$store.state.b

3.

관련 추천:

2020 프론트엔드 vue 인터뷰 질문 요약(답변 포함)

vue 튜토리얼 추천: 2020년 최신 5 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 원하시면, 방문:

프로그래밍 입문

! !

위 내용은 Vuex의 공통 지식 포인트(요약)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!