사후 대응 업데이트에 vuex를 사용하는 방법

사후 대응 업데이트에 vuex를 사용하는 방법

Vuex와 Vue를 처음 접하는 저는 Vuex가 어떻게 "리액티브하게" 사용되는지 이해하는 데 어려움을 겪고 있습니다.동료가 설명을 시도했지만 잘하지 못하거나 제가 너무 멍청해서 UI를 다시 칠하기 위해 스토어를 관찰할 수 있다고 말했습니다.

함수 본체와 함께 사용되는 속성을 콜백으로 감싸고 변경 사항에 대해 함수 전체를 재평가하는 것처럼 계산된 속성에 대한 아이디어를 얻을 수 있을 것 같습니다.Vuex는 이것에 어떻게 대응합니까?스토어 상태, 게터, 돌연변이 등의 예를 볼 수 있습니다.

state: {
    user: null,
    role: null
},
getters: {
    getUser: state => state.user,
    getRole: state => state.role,
},
mutations: {
    setUser: ({state}, user) => {
        state.user = user
    },
    setRole: ({state}, role) => {
        state.user = role
    }
}

이 컴포넌트와 UI 업데이트를 할 수 있는 컴포넌트 사이의 갭을 메울 수 없습니다.앞에서 설명한 관찰 가능한 콜백과 같은 방법을 설정하고 있습니까?

methods: {
    getUserFromStore () {
        return this.$store.getters.getUser
    }
}

반응성에 반하도록 수동으로 호출해야 합니다.매퍼 기능이 필요합니까?

매퍼 기능이 필요합니까?

그들은 매우 도움이 된다.그들은 게터를 계산된 성질에 싸서 아래로 밀어낼 것이다.

수동으로도 할 수 있지만 기존 코드가 getter를 메서드로 랩하려고 합니다.이것은 잘못된 것입니다.왜냐하면, 취득자에게 「콜」을 걸지 않기 때문입니다.Getters는 Vuex의 컨텍스트에서 "계산된" 속성입니다.나는 왜 그들이 다르게 이름 지어졌는지 모르겠다.그러나 수동 랩은 다음과 같습니다.

computed: {
    user() {
        return this.$store.getters.getUser;
    }
}

이것은 본질적으로mapGetters너한테는 그래.그러면 컴포넌트는 참조만 합니다.this.user

편집:

또한 getter는 일반적으로 데이터를 변환할 때 사용됩니다.고객님의 경우,userVuex 상태일 경우,mapState대신:

computed: {
   ...mapState(['user']) // reference as this.user
}

질문을 올바르게 이해하면 Vuex의 반응성은 다음과 같습니다.computedVue 내의 속성.다음 사항을 고려하십시오.

<template>
  <h2>{{ user }}</h2>
</template>

<script>
export default {
  computed: {
    // getters from store
    user () {
      return this.$store.getters.getUser
    }
}
</script>

그럴 때마다user스토어의 변경, 계산된 속성 값user변화할 것입니다.

언급URL : https://stackoverflow.com/questions/48693320/how-to-use-vuex-for-reactive-updates