Question

我正在将Vue.js与TypeScript一起使用。

链接到我的仓库：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，后者保持不变，因此模板中没有更新。

在getAlbumURL的{{1}}中使用: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可以。

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

1 个答案: