Vuex 저장소 업데이트가 구성 요소에 다시 렌더링을 적용하지 않음

Vuex 저장소 업데이트가 구성 요소에 다시 렌더링을 적용하지 않음

Vue.js를 TypeScript와 함께 사용하고 있습니다.

내 레포 링크: https://github.com/Am4nzi/ac-vue

이 구성 요소는 다음과 같습니다.Albums.vueiFrame을 렌더링하는 것입니다.iFrame이라는 다른 구성 요소에서 버튼을 클릭할 때 iFrame의 소스 URL을 업데이트하려고 합니다.AlbumsLeft.vue내 스토어 상태에서 다음 속성을 업데이트합니다.albumURL.

제가 안고 있는 문제는 앨범에서 URL을 설정하는 데 사용하는 계산된 속성입니다.스토어의 값이 변경될 때 vue가 iFrame 요소의 URL을 업데이트하지 않습니다.

계산된 속성이 변경 사항을 감지하면 자동으로 업데이트되어야 하는 것으로 알고 있지만, 제가 잘못 알고 있을 수 있습니다.만약 이것이 잘못된 접근법이라면, 누가 더 나은 접근법을 추천해 줄 수 있습니까?

Vue devtools에서 Vuex를 검사하여 버튼을 클릭하면 스토어의 상태가 예상대로 변경됨을 확인할 수 있습니다.

v-bind를 사용하여 iFrame 소스 URL을 동적으로 설정하고 있습니다.

<iframe
        :src="imageSrcURL"
...

스토어에서 URL을 가져와서 계산된 속성을 통해 imageSrcUrl이라는 변수로 설정하고 있습니다.

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';

@Component
export default class Albums extends Vue {
  get getAlbumURL() {
    return this.$store.state.albumURL;
  }

  private imageSrcURL = this.getAlbumURL;
}
</script>

AlbumsLeft.vue 내의 이벤트 처리기를 changeAlbum:라고 합니다.

changeAlbum(name: string) {
    this.$store.dispatch(
      'updateAlbumURL',
      'https://bandcamp.com/EmbeddedPlayer/album=4251477660/size=large/bgcol=333333/linkcol=ffffff/tracklist=false/transparent=true',
    );
  }

여기는 내 가게야:

export default new Vuex.Store({
  state: {
    currentAlbumId: '',
    albumURL: 'https://bandcamp.com/EmbeddedPlayer/album=3937120203/size=large/bgcol=333333/linkcol=ffffff/tracklist=false/transparent=true',
  },
  mutations: {
    setAlbumID(state, albumId) {
      state.currentAlbumId = albumId;
    },
    setAlbumUrl(state, albumURL) {
      state.albumURL = albumURL;
    },
  },
  actions: {
    updateAlbumID({ commit }, albumId) {
      commit('setAlbumID', albumId);
    },
    updateAlbumURL({ commit }, albumId) {
      commit('setAlbumUrl', albumId);
    },
  },
  modules: {
  },
});

잘 부탁드립니다!

문제는 여기에 있습니다.

get getAlbumURL() {
  return this.$store.state.albumURL;
}

private imageSrcURL = this.getAlbumURL;

getAlbumURL올바르게 변경되지만 다음으로 재할당하지 않습니다.imageSrcURL변경되지 않은 상태로 유지되므로 템플릿에 업데이트가 없습니다.

둘 중 하나 사용getAlbumURL에:src의<iframe>아니면, 필요하다면,imageSrcURL여기에 표시되지 않은 일부 기능의 경우,watch에getAlbumURL및 업데이트imageSrcURL전자가 바뀔 때마다

참고 사항: imageSrcURL해서는 안 됩니다private에 사용하면<template>.private클래스에만 접근할 수 있다는 뜻입니다.템플릿이 클래스 외부에 있습니다.기본적으로, 당신의 프로덕션은build이 오류로 인해 실패합니다.

가진 유일한 이유가imageSrcURL당신이 돌연변이를 할 수 없기 때문입니다.getAlbumURL실제로 세터를 사용하여 다음을 수행할 수 있습니다.

get getAlbumURL() {
  return this.$store.state.albumURL;
}
set getAlbumURL(val) {
  this.$store.dispatch('updateAlbumURL', val);
}

이제 안전하게 사용할 수 있습니다.getAlbumURL~하듯이v-model뭐 그런 거.또한 이름 지정 속성을 피해야 하는 이유를 이해할 수 있습니다.getStuff.stuff할 거다.

언급URL : https://stackoverflow.com/questions/61913268/vuex-store-update-not-applying-re-render-in-component