在 vue 组件中使用存储在 vuex 中的上传照片时遇到问题答案

【问题标题】：Trouble using uploaded photo stored in vuex in vue component在 vue 组件中使用存储在 vuex 中的上传照片时遇到问题
【发布时间】：2021-11-03 17:09:01
【问题描述】：

我可以上传一张用作头像的照片，但只能显示我的默认照片。当我尝试访问新上传的文件时，组件显示 $store.state.photo。我相信我可能需要照片，因为与 webpack 有关，但我不明白我应该在哪里做。我可以在我的 vuex 商店中做到这一点，但不能在组件中做到这一点。

当我检查 vue 开发工具时，刚刚上传的照片确实显示为 state.photo 的新值，只是不会显示。

Vue 组件

<v-avatar size="70" class="mb-2">
   <img :src="$store.state.photo" alt="$store.state.name" />
</v-avatar>

Vuex 商店

state: {
    photo: require('../../backend/public/users/default.jpg')
  },

我在组件的数据中尝试了以下方法，但它不起作用。我错过了什么？

data() {
    return {    
      photo: require(`../backend/public/users/${this.$store.state.photo}`)
    };
  },

【问题讨论】：

【解决方案1】：

当用户没有上传他们的图片时显示默认图片是一个演示问题，而不是逻辑状态问题；你不应该为此使用 Vuex。您可以改用photo: null 来初始化状态/数据，这样可以更好地模拟当前不存在的照片。

此外，对于这种静态资产，使用相对路径是一个坏主意，如果您将组件移动到另一个文件夹，这将破坏。相对较新的 vue-cli 项目配置为使用 @ 作为 src 文件夹。

所以你的组件可能看起来像

<v-avatar size="70" class="mb-2">
   <img :src="$store.state.photo || '@/backend/public/users/default.jpg'" alt="$store.state.name" />
</v-avatar>

只要您实际上将空值初始化为 null 而不是 '' 之类的东西，它就应该做您想做的事

【讨论】：