问题
再写一个 v3 + ts 项目时遇到一个问题
在项目的assets 文件夹下 我放入了音频 和 图片
同时， 在vuex 定义好数据
接口限制
/*
@ params {
id : 唯一音乐id
playUrl: 音乐路径
name: string;
singer: string;
imageUrl: string;
}
*/
export interface MusicData {
id: number;
playUrl: string;
name: string;
singer: string;
imageUrl: string;
}
组件中使用（循环之后拿出的结构）
// 监视来自父组件的变化
watch(
() => props.musicData,
(newVal) => {
musicInfo = newVal ;
musicInfo.imageUrl = require("@/assets/music/imageUrl/" +
newVal.imageUrl.replace("@/assets/music/imageUrl/", ""));
},
{ immediate: true }
);
这里要引入一个注意点 直接将 @/xx/xxx/xx 路径在页面加载是加载不了的， 因为@是需要在打包时解析为/src的， 这里如果不使用require加载解析的话，打包后图片路径就是字符串的@/xxx/xx/xx， 打包后我们就不能找到webpack生成文件目录的文件了 —> 其实就是资源的动态加载
这里就使用require先加载路径后再放入img中，注意require中不能是变量（webpack 是一个构建工具，而他的核心思想是一切都是模块，根据模块的依赖关系进行打包，而这些模块必须要是本地资源，既然是本地资源，就肯定是确定的资源，而没有必要使用未知的变量资源，详细介绍 https://www.zhihu.com/question/421711093）
如
watch(
() => props.musicData,
(newVal) => {
musicInfo = newVal ;
musicInfo.imageUrl = require(newVal); /// xxx
//Uncaught (in promise) Error: Cannot find module '@/assets/music/imageUrl/m1.jpg'
},
{ immediate: true }
);
到这一步 页面上已经有了加载的图片了 可是只要切换路由，这边图片便不能加载了，抛出错误 Cannot find module './/img/m1.4ee940fd.jpg' at webpackContextResolve 我的代码中， 每次切换路由，只要切换回来都会触发监视， 从而重新加载， 每次加载的数据都还是直接从store中获取的，应该都是（@/xx/xxx/格式的），按道理说不应该出现路径错误的
这里再放一下代码
watch(
() => props.musicData,
(newVal) => {
musicInfo = newVal ; // 监视到 ， 则更新
musicInfo.imageUrl = require("@/assets/music/imageUrl/" +
newVal.imageUrl.replace("@/assets/music/imageUrl/", ""));
},
{ immediate: true }
);
然后我打印了监视的数据和赋值的数据变量
// 监视来自父组件的变化
watch(
() => props.musicData,
(newVal) => {
musicInfo = newVal;
// 加载前
console.log("#", musicInfo.imageUrl, newVal.imageUrl);
musicInfo.imageUrl = require("@/assets/music/imageUrl/" +
newVal.imageUrl.replace("@/assets/music/imageUrl/", ""));
// 加载后
console.log("?", musicInfo.imageUrl, newVal.imageUrl);
},
{ immediate: true }
);
result 初次加载
加载前结果
# @/assets/music/imageUrl/m1.jpg @/assets/music/imageUrl/m1.jpg
加载后结果
? /img/m1.4ee940fd.jpg /img/m1.4ee940fd.jpg
一切正常
然后切换路由重新加载 result
# /img/m1.4ee940fd.jpg /img/m1.4ee940fd.jpg
就只有加载前的结果了， 但是也很清楚与问题所在了 第二次加载没有按我所设想的那般传入我设定好的原始路径， 后面replace替换自然就出现了问题，导致报错找不到路径
？？？可是我进行了替换值（每次渲染），为什么获得的时其他值？
原因在于store中的数值object引用问题，前面代码中的浅拷只是赋值了引用地址（store的）， 所以当我更改替换musicInfo路径时实际上也是更改了store数值的那个引用地址数据，
知道后解决就简单了， 给一个深拷就行
因为拷贝对象是一个对象，可以使用for in 实现
问题解决
精彩内容
发表评论