Vuex 저장소 상태가 변경될 때 Vue 구성 요소 속성을 업데이트하는 방법을 선택하십시오.

Vuex 저장소 상태가 변경될 때 Vue 구성 요소 속성을 업데이트하는 방법을 선택하십시오.

Vue js 및 Vuex를 사용하여 프레젠테이션 작성, 이름 지정, 슬라이드 추가/삭제를 할 수 있는 간단한 프레젠테이션 툴을 구축하고 있습니다.모든 것이 잘 진행되고 있습니다만, 프레젠테이션의 변경(제목 변경, 슬라이드 추가/삭제)을 검출하는 기능을 실장하려고 하고 있습니다만, 아직 적절한 솔루션을 찾을 수 없습니다.간단하게 제목 변경에 관해서만 예를 들겠습니다.현재 Vuex 스토어에는 다음과 같은 제품이 있습니다.

const state = {
    presentations: handover.presentations, //array of objects that comes from the DB
    currentPresentation: handover.presentations[0]
}

프레젠테이션 컴포넌트에는 다음이 있습니다.

export default {
    template: '#presentation',
    props: ['presentation'],
    data: () => {
        return {
            shadowPresentation: ''
        }
    },
    computed: {
        isSelected () {
            if (this.getSelectedPresentation !== null) {
                return this.presentation === this.getSelectedPresentation
            }
            return false
        },
        hasChanged () {
            if (this.shadowPresentation.title !== this.presentation.title) {
                return true
            }
            return false
        },
        ...mapGetters(['getSelectedPresentation'])
    },
    methods: mapActions({
        selectPresentation: 'selectPresentation'
    }),
    created () {
        const self = this
        self.shadowPresentation = {
            title: self.presentation.title,
            slides: []
        }

        self.presentation.slides.forEach(item => {
            self.shadowPresentation.slides.push(item)
        })
    }
}

지금까지의 작업은 컴포넌트가 작성되었을 때 프레젠테이션의 섀도 복사본을 작성한 후 계산된 속성을 사용하여 관심 있는 속성(이 경우 제목)을 비교하고 다른 항목이 있으면 true를 반환하는 것입니다.이것은 변경을 검출하는 데 도움이 되지만, 프레젠테이션이 저장되었을 때 섀도우 프레젠테이션을 갱신할 수 있도록 하고 싶습니다.다른 컴포넌트에서 savePresentation 액션이 트리거되어 프레젠테이션컴포넌트 내에서 'save' 이벤트를 선택하는 방법을 잘 모르기 때문에 섀도 프레젠테이션을 갱신하지 못했습니다.어떻게 하면 이런 기능을 구현할 수 있을까요?어떤 도움이라도 주시면 감사하겠습니다!잘 부탁드립니다!

질문에서 물어본 것과 다른 방법으로 이 문제를 풀게 되었지만, 몇몇 사람들에게는 흥미로울 수도 있습니다.자, 이렇게 합시다.

먼저 vue store가 이벤트를 컴포넌트에 전달하는 것을 포기했습니다.vuex를 사용할 때는 모든 앱 상태를 vuex store에서 관리해야 하기 때문입니다.제가 한 일은 프레젠테이션 오브젝트 구조를 바꾸는 것이었습니다.

{
    title: 'title',
    slides: []
}

이렇게 좀 더 복잡한 것에 대해서

{
    states: [{
        hash: md5(JSON.stringify(presentation)),
        content: presentation
    }],
    statesAhead: [],
    lastSaved: md5(JSON.stringify(presentation))
}

어디에presentation처음에 가지고 있던 간단한 프레젠테이션 오브젝트입니다.새로운 프레젠테이션 오브젝트에 소품이 있습니다.states여기서 모든 프레젠테이션 상태를 저장합니다.각 상태에는 스트링화된 심플한 프레젠테이션 오브젝트와 실제 심플한 프레젠테이션 오브젝트에 의해 생성된 해시가 있습니다.이와 같이 보존의 모든 변경에 대해 다른 해시를 가진 새로운 상태를 생성하여 현재 상태 해시를 마지막으로 저장한 해시와 비교할 수 있습니다.프레젠테이션을 저장할 때마다lastSaved현재 상태 해시에 추가합니다.에서는 unshift/shift 상태를 만으로 undo 기능을 할 수 .states로로 합니다.statesAhead그리고 그 반대는 제가 처음에 의도했던 것보다 훨씬 더 많았습니다. 그리고 결국 저는 상태 관리를 조각화하고 구성 요소를 오염시키는 대신 vuex 스토어에서 모든 상태를 관리했습니다.

너무 혼란스럽지 않으셨기를 바라며 누군가가 이것을 유용하게 여겨주길 바랍니다.건배.

사용자 상태에 새 속성을 추가하려고 할 때 이 문제가 발생했기 때문에 이 문제가 발생하여 정상적으로 작동합니다.

Vuex 스토어 작업

   updateUser (state, newObj) {
      if (!state.user) {
        state.user = {}
      }
      for (var propertyName in newObj) {
        if (newObj.hasOwnProperty(propertyName)) {
          //updates store state
          Vue.set(state.user, propertyName, newObj[propertyName])
        }
      }
    }

실행

Vue 컴포넌트에서 위의 스토어 액션을 호출합니다.

this.updateUser({emailVerified: true})

물건

{"user":{"emailVerified":true},"version":"1.0.0"}

언급URL : https://stackoverflow.com/questions/39296975/how-to-update-vue-component-property-when-vuex-store-state-changes