Javascript v-if条件未从计算属性更新

已解决（几乎）：删除

并将src数据绑定到

。现在，它在发送请求的同时加载（在

getBLOB

中没有数据，但随后会重新加载自身（无需手动保存文件）。 为什么这个特定的

v-if

对我不起作用仍然是个谜。谢谢你们

已编辑Frame.vue

      //This is needed
<video v-bind:src="getBLOB"> 
           //Here too
    <source v-bind:src="getBLOB" type="video/mp4" />
    Your browser does not support the
</video>

<template>
...
    <div v-if="isFrameLoaded">
        <video>
           <source v-bind:src="getBLOB" type="video/mp4" />
        </video>
    </div>
</template>
<script>
export default {
  computed: {
    isFrameLoaded() {
    //this is called just once
      console.log("isFrameLoaded()");
      return this.$store.getters["content/isFrameLoaded"];
    }
  }
};
</script>

来自store content.js的getter

getters:{
...,
isFrameLoaded: state => state.isFrameLoaded
}

突变

mutations: {
...,
SAVE_ISFRAMELOADED(state, boolean) {
      state.isFrameLoaded = boolean;
      console.log("frame loaded");
    },
}

---

我尝试过的事情： 绑定

：键

，

此。$forceUpdate（）

，

---

问题是在下载资源之前检查了

（

isFrameLoaded==false

），一段时间后将下载资源，并且计算属性应返回 在$store.getters中为true，但我看到的是，即使在更新了computed属性的状态之后，也不会再次调用该属性

我以前做过，它可以正常工作。唯一的区别是主页。vue是一个视图和框架。vue是一个组件，$store可以正常工作

这不管用 Frame.vue

      //This is needed
<video v-bind:src="getBLOB"> 
           //Here too
    <source v-bind:src="getBLOB" type="video/mp4" />
    Your browser does not support the
</video>

<template>
...
    <div v-if="isFrameLoaded">
        <video>
           <source v-bind:src="getBLOB" type="video/mp4" />
        </video>
    </div>
</template>
<script>
export default {
  computed: {
    isFrameLoaded() {
    //this is called just once
      console.log("isFrameLoaded()");
      return this.$store.getters["content/isFrameLoaded"];
    }
  }
};
</script>

此方法会修改有效的条件（isThumbnailLoaded）

getThumbnails（{commit，state}）{
提交（“保存已加载”，false）；//此处
state.home.imgs.forEach（（缩略图，i）=>{
内容服务
.getThumbImg（）
。然后（响应=>{
var url=url.createObjectURL（新Blob（[response.data]）；
提交（“保存缩略图”{
键：state.home.frames[i]，
值：url，
喜欢：state.home.likes[i]
});
if（state.thumbFrame.length==state.home.imgs.length）{
提交（“SAVE_ISTHUMBNAILLOADED”，true）；//此处
}
});
});
返回；

我注意到，如果我从Frame.vue中删除v-if，则在第一次尝试时，源文件不会加载（图像类型始终加载，但视频类型不会加载），但如果我在项目运行时更新并保存项目，视频资源也会加载

那么..有什么提示吗？我读过关于nextTick（）函数的书，但它似乎太复杂了，我还想知道为什么在运行项目时修改项目的文件可以解决这个错误

---

谢谢！

您实际上不需要创建计算属性。存储getter已经是被动的

将getter包装到computed prop中的方式并不会使computed prop成为被动的，因为getter和computed properties实际上是在引用时隐式执行的方法。如果您实际记录computed prop，如：

console.log('Getter: ', this.$store.getters["content/isThumbnailLoaded"]);

您将看到，这将记录一个方法，而不是您期望的值

可以使用MapGetter将getter映射到组件中的计算道具

import { mapGetters } from 'vuex';

  export default {
    computed: {
      ...mapGetters({
        isFrameLoaded: 'content/isFrameLoaded',
      }),
    }
  };

或者，如果您想继续使用此方法，可以执行以下操作：

export default {
  computed: {
    isFrameLoaded() {
      //this is called just once
      console.log("isFrameLoaded: ", this.$store.getters["content/isFrameLoaded"]());
      return this.$store.getters["content/isFrameLoaded"]();
    }
  }
};

我仍然建议使用第一种方法，即更具可读性和更清晰

---

注意。

实际上不需要创建计算属性。存储getter已经是被动的

将getter包装到computed prop中的方式并不会使computed prop成为被动的，因为getter和computed properties实际上是在引用时隐式执行的方法。如果您实际记录computed prop，如：

console.log('Getter: ', this.$store.getters["content/isThumbnailLoaded"]);

您将看到，这将记录一个方法，而不是您期望的值

可以使用MapGetter将getter映射到组件中的计算道具

import { mapGetters } from 'vuex';

  export default {
    computed: {
      ...mapGetters({
        isFrameLoaded: 'content/isFrameLoaded',
      }),
    }
  };

或者，如果您想继续使用此方法，可以执行以下操作：

export default {
  computed: {
    isFrameLoaded() {
      //this is called just once
      console.log("isFrameLoaded: ", this.$store.getters["content/isFrameLoaded"]());
      return this.$store.getters["content/isFrameLoaded"]();
    }
  }
};

我仍然建议使用第一种方法，即更具可读性和更清晰

---

您好。

您是否检查了Vue DevTool，状态=

isFrameLoaded

是否正确更新？是的，但在我在浏览器上看到视频后（在运行时保存文件后），其他功能似乎不起作用如果我想查看另一个视频资源，我必须再次修改和保存文件，尽管Vue DevTool显示状态始终正确更新。您是否检查了Vue DevTool，状态=

isFrameLoaded

是否正确更新？是的，但在我在浏览器上看到视频后（在运行时保存文件后），似乎其他东西不起作用如果我想查看另一个视频资源，我必须再次修改和保存文件，尽管Vue DevTool显示状态始终正确更新。您好，我尝试了您的第一种方法，但结果保持不变，DevTools继续显示正确的状态值，除此之外的所有内容都会加载，至少在我运行时手动保存项目文件之前是如此。I尝试使用

此。$forceUpdate（）

并使用

键进行绑定，但尚未取得任何进展。谢谢！您能否显示
的getter的定义是如何框架加载的
？将存储区中的getter定义添加到原始问题中。这是我唯一看不到您是如何定义的。您好，我尝试了您的第一个方法，但结果仍然相同同样，DevTools会继续显示正确的状态值，除此之外的所有内容都会加载，至少直到我在运行时手动保存项目文件

并使用

键进行绑定，但尚未取得任何进展。谢谢！您能展示一下
的getter定义是如何框架加载的吗？
？将存储中的getter定义添加到原始问题中。这是我唯一看不到您是如何定义的。