问题
- 再写一个 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 实现
问题解决