Vuex商店更新未在组件中应用重新渲染

Question

我正在使用带有 TypeScript 的 Vue.js。

链接到我的仓库：https://github.com/Am4nzi/ac-vue

我有一个名为Albums.vue 的组件正在渲染一个iFrame。当在另一个名为AlbumsLeft.vue 的组件中单击另一个组件 时，我正在尝试更新iFrame 的源URL。这会更新我的商店状态中名为 albumURL 的属性。

我遇到的问题是，当商店中的值发生变化时，我用于在 Albums.vue 中设置 URL 的计算属性没有更新 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: {
  },
});

提前致谢！

Answer 1

问题出在这里：

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

private imageSrcURL = this.getAlbumURL;

getAlbumURL 正确更改，但您没有将其重新分配给 imageSrcURL，它保持不变，因此模板中没有更新。

在:src 或<iframe> 中使用getAlbumURL，或者，如果您确实需要imageSrcURL 来获得此处未显示的某些功能，请在getAlbumURL 上放置一个watch，然后分别更新imageSrcURL时间前者改变。

旁注： 如果您在<template> 中使用imageSrcURL，则它不应该是private。 private 表示只有班级可以访问它。模板在类之外。基本上，您的生产 build 会因为这个错误而失败。

如果拥有imageSrcURL 的唯一原因是因为您不能改变getAlbumURL，那么您实际上可以使用setter：

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

现在您可以安全地将getAlbumURL 用作v-model 或其他任何东西。你可能也理解为什么你应该避免命名属性getStuff。 stuff 可以。