매퍼를 사용한 양방향 바인딩 계산 속성

매퍼를 사용한 양방향 바인딩 계산 속성

Vue 2 프로젝트에서 vuex를 사용합니다.

이 HTML 요소를 사용하여 양방향 바인딩을 구현하려고 합니다.

<input v-model="message">


computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

inside get and set 코드가 더 깔끔하게 보이도록 맵퍼를 사용합니다.

computed: {
  message: {
    get () {
      return ...mapState("obj", ["message"])
    },
    set (value) {
      ...mapMutations("obj/updateMessage", value)
    }
  }
}
    

그러나 다음 두 줄에서 오류가 발생합니다.

return ...mapState("obj", ["message"])   -   Expression expected.

...mapMutations("obj/updateMessage", value) - Declaration or statement expected.

get and set 안에 있는 mapper는 어떻게 사용하나요?

업데이트: mapMutations 및 mapState가 컴포넌트로 Import됩니다.

이전과 마찬가지로 먼저 Import해야 합니다.
import { mapState, mapActions } from 'vuex'
돌연변이가 아닌 액션을 Import합니다.실제로는 액션만 비동기이며 흐름은 항상 다음과 같아야 합니다.dispatch a action>commit a mutation>state is updated.

그런 다음 제자리에 꽂습니다.

computed: {
  ...mapState('obj', ['message']),
  // other computed properties ...
}

methods: {
  ...mapActions('obj', ['updateMessage']),
  // other methods ...
}

그리고 흥미로운 부분이 있다.

computed: {
  message: {
    get () {
      const cloneDeepMessage = cloneDeep(this.message)
      // you could make some destructuring here like >> const { id, title, description } = cloneDeepMessage
      return cloneDeepMessage // or if destructured some fields >> return { id, title, description }
    },
    set (value) {
      this.updateMessage(value)
    }
  }
}

보다시피, 저는 또한import cloneDeep from 'lodash/cloneDeep'이 때문에 국가가 직접 변질되는 것을 피하기 위해cloneDeep에 액세스 합니다.
이는 Vuex strict 모드가 제공하는 경고이므로 개발 중에만 사용하도록 설정하는 것이 좋습니다.

공식 문서는 이 부분에 대해 매우 명시적이지 않지만(여러 부분을 읽고 모두 혼합해야 함) 기본적으로 IMHO를 수행하는 좋은 방법입니다.

언급URL : https://stackoverflow.com/questions/66016328/two-way-binding-computed-property-with-mappers