简体   繁体   English

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

[英]Vuex store update not applying re-render in component

I am using Vue.js with TypeScript.我正在使用 Vue.js 和 TypeScript。

Link to my repo: https://github.com/Am4nzi/ac-vue链接到我的仓库:https://github.com/Am4nzi/ac-vue

I have a component called Albums.vue which is rendering an iFrame.我有一个名为Albums.vue的组件,它正在渲染 iFrame。 I am attempting to update the source URL of the iFrame when a button is clicked in another component called AlbumsLeft.vue .在另一个名为 AlbumsLeft.vue 的组件AlbumsLeft.vue This updates a property in my store state called albumURL .这会更新我的商店 state 中名为albumURL的属性。

The issue I am having is that the computed property I am using to set the URL in Albums.vue is not updating the URL in the iFrame element when the value in the store changes.我遇到的问题是我用来在 Albums.vue 中设置 URL 的计算属性没有更新 ZF5AB0F82D3C5556BAA773B78DE397F35 中的元素值更改时的 ZF5AB0F82D3C5556BAA773B78DE397F35 中的 URL

My understanding is that a computed property should automatically update when it detects a change, however I could be mistaken.我的理解是计算属性应该在检测到更改时自动更新,但是我可能会弄错。 If this is the wrong approach, could anyone recommend a better one?如果这是错误的方法,有人可以推荐更好的方法吗?

I can confirm that the state in the store does change as expected when the button is clicked via inspecting Vuex in Vue devtools.我可以确认商店中的 state 在通过检查 Vue devtools 中的 Vuex 单击按钮时确实发生了变化。

I am setting the iFrame source URL dynamically using v-bind:我正在使用 v-bind 动态设置 iFrame 源 URL:

<iframe
        :src="imageSrcURL"
...

I am getting the URL from the store and setting it to a variable called imageSrcUrl via a computed property:我从商店获取 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>

The event handler within AlbumsLeft.vue is called changeAlbum: 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',
    );
  }

This is my store:这是我的商店:

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: {
  },
});

Thanks in advance!提前致谢!

The problem is here:问题在这里:

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

private imageSrcURL = this.getAlbumURL;

getAlbumURL changes correctly, but you're not reassigning it to imageSrcURL , which remains unchanged, hence no update in the template. getAlbumURL更改正确,但您没有将其重新分配给imageSrcURL ,它保持不变,因此模板中没有更新。

Either use getAlbumURL in :src of <iframe> or, if you do need imageSrcURL for some functionality you haven't shown here, place a watch on getAlbumURL and update imageSrcURL each time the former changes.<iframe>:src中使用getAlbumURL ,或者,如果您确实需要imageSrcURL来实现此处未显示的某些功能,请watch getAlbumURL并在每次前者更改时更新imageSrcURL

Side note: imageSrcURL should not be private if you use it in <template> .旁注:如果你在<template>中使用imageSrcURL ,它不应该是private的。 private means it's only accessible to the class. private意味着它只能由 class 访问。 The template is outside the class.模板位于 class 之外。 Basically, your production build will fail because of this error.基本上,您的生产build将由于此错误而失败。

If the only reason for having imageSrcURL is because you can't mutate getAlbumURL , you can actually, using a setter:如果拥有imageSrcURL的唯一原因是因为您不能改变getAlbumURL ,那么您实际上可以使用 setter:

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

Now you can safely use getAlbumURL as v-model or whatever.现在您可以安全地将getAlbumURL用作v-model或其他任何东西。 And you might also understand why you should avoid naming properties getStuff .而且您可能还理解为什么应该避免命名属性getStuff stuff will do. stuff会做。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM