vuex에 대한 나의 이해에 대해 이야기합시다-JS 튜토리얼-php.cn

vuex에 대한 나의 이해에 대해 이야기합시다

零下一度

풀어 주다： 2017-06-26 13:30:18

원래의

1929명이 탐색했습니다.

vuex는 vue 구성요소와 구성요소 간의 통신 문제를 해결하기 위해 존재합니다. vuex는 이해하기가 조금 복잡하지만 일단 이해하고 나면 사용하기 쉽습니다.

설치:

npm install --save vuex

로그인 후 복사

몇 가지

import Vuex

로그인 후 복사

를 소개합니다.

vuex 매개변수 소개

State 저장 초기화 데이터

Getters State에서 데이터의 2차 처리(데이터 필터링은 필터와 유사) 예를 들어 State는 객체를 반환하고 우리는 State에서 키 값을 가져오고 싶습니다. 이 메소드를 사용하는 객체

Mutations 데이터 계산을 위한 모든 메소드가 여기에 기록됩니다(계산과 유사) 페이지에서 트리거될 때 this.$store.commit('mutationName')을 사용하여 상태 값을 변경하는 Mutations 메소드를 트리거합니다.

Actions 처리 Mutations는 이미 작성되어 있습니다. 직접 트리거하는 방법은 $store.dispatch(actionName)

먼저 자세히 알아보도록 서두르지 마세요. Vuex

console.log(Vuex) //Vuex为一个对象里面包含Vuex ={
    Store:function Store(){},    
    mapActions:function(){},    // 对应Actions的结果集mapGetters:function(){},    //对应Getters的结果集mapMutations:function(){},  //对应Mutations的结果集mapState:function(){},      //对应State的结果集install:function install(){}, //暂时不做讲解 installed:true //暂时不做讲解}//如果我们只需要里面的State时我们可以这样写import { mapState } from 'vuex';
import { mapGetters, mapMutations } from 'vuex'; //如果需要引用多个时用这种方式处理

로그인 후 복사

위 내용을 반복해서 살펴보세요. 다음으로 진행하겠습니다. 다음은 몇 가지 예와 공식 언어 설명입니다.

State

State는 전체 애플리케이션의 상태 데이터를 저장하는 역할을 담당합니다. 일반적으로 이를 사용할 때 저장소 개체를 노드에 삽입해야 합니다. 나중에 this.$store.state를 사용하여 상태를 직접 얻을 수 있습니다

//store为实例化生成的import store from './store' new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

로그인 후 복사

이 저장소는 애플리케이션의 상태를 포함하는 컨테이너로 이해될 수 있습니다. 스토어를 인스턴스화하고 생성하는 과정은 다음과 같습니다.

//./store文件const store = new Vuex.Store({
  state: {   //放置state的值
    count: 0,
    strLength:"abcd234"
  },
  getters: {   //放置getters方法
      strLength: state => state.aString.length
  },
  mutations: {   //放置mutations方法
       mutationName(state) {          //在这里改变state中的数据  state.count = 100;
       }
  },  // 异步的数据操作  actions: {      //放置actions方法
       actionName({ commit }) {          //dosomething commit('mutationName')
      },
      getSong ({commit}, id) {
          api.getMusicUrlResource(id).then(res => {
            let url = res.data.data[0].url;
        
          })
          .catch((error) => {  // 错误处理              console.log(error);
          });
      }
  }
});
export default store;

로그인 후 복사

이후 컴포넌트에서 사용하는 동안 해당 상태를 얻으려면 this.$store.state를 직접 사용하여 얻을 수도 있습니다. 제공된 vuex를 사용하십시오. mapState 보조 함수는 상태를

import {mapState} from 'vuex'export default {  //组件中
  computed: mapState({
    count: state => state.count
  })
}

로그인 후 복사

Getters

와 같은 계산된 속성에 매핑합니다. 일부 상태에는 보조 처리가 필요하므로 getter를 사용할 수 있습니다. this.$store.getters.valueName을 통해 파생된 상태에 액세스합니다. 또는 보조 함수 mapGetters를 직접 사용하여 로컬 계산 속성에 매핑합니다.

컴포넌트에서 사용하는 방법

import {mapGetters} from 'vuex'export default {  
computed: mapGetters(['strLength'])
}

로그인 후 복사

Mutations

Mutations는 중국어로 "변경"을 의미합니다. 이는 본질적으로 고유한 매개변수 값 상태를 전달받는 데이터를 처리하는 데 사용되는 함수입니다. . store.commit(mutationName)은 변형을 트리거하는 데 사용되는 메서드입니다. 기억해야 할 것은 정의된 변이가 동기 함수여야 한다는 것입니다. 그렇지 않으면 개발 도구의 데이터에 문제가 있어 상태 변경을 추적하기 어려울 수 있습니다.

구성 요소의 트리거:

export default {
  methods: {
    handleClick() {      this.$store.commit('mutationName')
    }
  }
}

로그인 후 복사

또는 보조 함수 mapMutations를 사용하여 트리거 함수를 메서드에 직접 매핑하여 요소 이벤트 바인딩에서 직접 사용할 수 있습니다. 예:

import {mapMutations} from 'vuex'export default {
  methods: mapMutations(['mutationName'
  ])
}

로그인 후 복사

Actions

Actions를 사용하여 상태를 변경할 수도 있지만 이는 돌연변이를 트리거하여 구현됩니다. 중요한 점은 비동기 작업을 포함할 수 있다는 것입니다. 보조 기능은 mapMutations와 유사하고 구성 요소의 메서드에도 바인딩되는 mapActions입니다. 직접 트리거하려면 this.$store.dispatch(actionName) 메서드를 사용하세요.

컴포넌트에

import {mapActions} from 'vuex'//我是一个组件export default {
  methods: mapActions(['actionName',
  ])
}

로그인 후 복사

Plugins

를 사용하세요. 플러그인은 후크 기능으로 스토어 초기화 시 도입할 수 있습니다. 더 일반적으로 사용되는 것은 디버깅에 사용되는 내장 로거 플러그인입니다.

//写在./store文件中import createLogger from 'vuex/dist/logger'const store = Vuex.Store({
  ...
  plugins: [createLogger()]
})

로그인 후 복사

위 내용은 vuex에 대한 나의 이해에 대해 이야기합시다의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!