Svelte跨组件传递响应式数据：writable store报subscribe is not a function问题

1 核心报错原因：导入路径不一致 #

你两个组件导入uPic store的路径不匹配：

• userprofile组件导入路径：import { uPic } from '../../lib/stores/uPic.js';
• updatePic组件导入路径：import { uPic } from '../../stores/uPic.js';

updatePic组件的导入路径少了lib层级，导致拿到的uPic不是你定义的writable store实例，自然没有subscribe方法，用$符号订阅的时候就会抛出对应错误。
修复：把updatePic组件的导入路径改成和userprofile组件完全一致。

2 updatePic组件更新store的代码错误 #

你在updatePic组件的第二个axios回调中，写了meData = res;，这里的res变量未定义，正确的返回参数是response，所以要改成：

.then(response => {
  console.log('הצליח', response.data);
  // 修复：把res改成response.data
  meData = response.data;
  uPic.set(meData.profilePic.formats.small.url);
})

3 头像地址无响应式更新的问题 #

你当前定义的picLink是普通变量，uPic store更新时不会自动重新计算，导致头像地址不会同步变化。
修复：用Svelte响应式声明改写picLink
把userprofile组件里的let picLink;和普通赋值语句删掉，改成响应式声明：

$: picLink = "http://localhost:5000" + $uPic;

修改后只要uPic store的值变化，picLink就会自动更新，头像也会同步刷新。

可选优化：简化store订阅 #

你不需要手动调用subscribe方法监听store变化，直接用Svelte内置的$语法糖即可，删掉两个组件里手动uPic.subscribe的代码，直接通过$uPic就能拿到store的最新值，代码更简洁。

内容的提问来源于stack exchange，提问作者L Baruch Babayof