vuex의 용도는 무엇입니까?

vuex는 복잡한 애플리케이션의 데이터 상태를 관리하고 형제 구성 요소 간 통신, 다중 계층 중첩 구성 요소의 값 전송 등 구성 요소 간 데이터 공유를 용이하게 할 수 있는 vue 프레임워크 기반의 상태 관리 라이브러리입니다. 중앙 집중식 저장소를 사용하여 애플리케이션의 모든 구성 요소 상태를 관리하고 해당 규칙을 사용하여 상태가 예측 가능한 방식으로 변경되도록 합니다.

Vuex는 Vue.js 애플리케이션용으로 특별히 개발된 상태 관리 모델이며, vue 프레임워크를 기반으로 하는 상태 관리 라이브러리입니다. 복잡한 애플리케이션의 데이터 상태를 관리하고 형제 구성 요소 간의 통신, 다중 계층 중첩 구성 요소 간의 값 전송 등과 같은 구성 요소 간의 데이터 공유를 용이하게 할 수 있습니다.

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

Vuex는 Vue의 공식 디버깅 도구인 devtools 확장에도 통합되어 제로 구성 시간 이동 디버깅, 상태 스냅샷 가져오기 및 내보내기 등과 같은 고급 디버깅 기능을 제공합니다.

Vuex의 핵심 기능

(1)State: 유일한 공개 데이터 소스를 제공하며, 모든 공유 데이터는 Store의 State에 저장되어야 합니다.

컴포넌트에서 State에 액세스하는 방법:

A.this. $store.state. 전역 데이터 이름은 다음과 같습니다. this.$store.state.count

B 먼저 필요에 따라 mapState 함수를 가져옵니다. import { mapState } from 'vuex'

그런 다음 데이터가 계산됨에 매핑됩니다. 속성: 계산:{ ...mapState(['전역 데이터 이름']) }

(2) 돌연변이: $store

의 데이터를 수정하는 데 사용됨사용법:

store.js 파일을 열고 다음을 추가합니다. code in mutations ：

mutations: {
    add(state,step){
      //第一个形参永远都是state也就是$state对象
      //第二个形参是调用add时传递的参数
      state.count+=step;
    }
  }

그런 다음 Addition.vue의 버튼에 다음과 같이 이벤트 코드를 추가합니다.

<button @click="Add">+1</button>

methods:{
  Add(){
    //使用commit函数调用mutations中的对应函数，
    //第一个参数就是我们要调用的mutations中的函数名
    //第二个参数就是传递给add函数的参数
    this.$store.commit(&#39;add&#39;,10)
  }
}

뮤테이션을 사용하는 두 번째 방법:

import { mapMutations } from ‘vuex’
methods:{…mapMutations([‘add’])}

다음과 같이:

import { mapState,mapMutations } from 'vuex'

export default {
  data() {
    return {}
  },
  methods:{
      //获得mapMutations映射的sub函数
      ...mapMutations(['sub']),
      //当点击按钮时触发Sub函数
      Sub(){
          //调用sub函数完成对数据的操作
          this.sub(10);
      }
  },
  computed:{
      ...mapState(['count'])
      
  }
}

(3)작업: 비동기식은 불가능합니다. 돌연변이 코드로 작성되면 vue 디버거에서 표시 오류가 발생합니다. vuex에서는 Action을 사용하여 비동기 작업을 수행할 수 있습니다.
단계는 다음과 같습니다.

store.js 파일을 열고 다음과 같이 작업을 수정합니다.

actions: {
  addAsync(context,step){
    setTimeout(()=>{
      context.commit('add',step);
    },2000)
  }
}

그런 다음 다음과 같이 Addition.vue의 버튼에 이벤트 코드를 추가합니다.

<button @click="AddAsync">...+1</button>

methods:{
  AddAsync(){
    this.$store.dispatch(&#39;addAsync&#39;,5)
  }
}

(4) Getter: 사용되는 저장소 처리에서 데이터를 처리하여 새로운 데이터를 형성합니다.

Store에 저장된 데이터만 래핑하고 Store에 저장된 데이터를 수정하지 않습니다. Store의 데이터가 변경되면 Getter에서 생성된 콘텐츠도 그에 따라 변경됩니다.
store.js 파일을 열고 다음과 같이 getter를 추가하세요.

export default new Vuex.Store({
  .......
  getters:{
    //添加了一个showNum的属性
    showNum : state =>{
      return '最新的count值为：'+state.count;
    }
  }
})

그런 다음 Addition.vue를 열고 getters를 사용하여 보간 표현식을 추가하세요.

<h3>{{$store.getters.showNum}}</h3>

Addition.vue에서 mapGetters를 가져와서 계산된 속성에 매핑할 수도 있습니다

import { mapGetters } from 'vuex'
computed:{
  ...mapGetters(['showNum'])
}

관련 권장 사항:

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

vue 튜토리얼 권장 사항: 2020년 최신 5 vue.js 비디오 튜토리얼 선택

더 많은 프로그래밍 관련 지식을 보려면 다음을 방문하세요: 프로그래밍 가르치다! !

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