定位 Weex Vue Mixin 无法使用的问题

更新日期: 2017-07-31 阅读次数: 10047 分类: weex

现象是 Mixin 中定义的函数,在 Vue 页面中调用的时候,均显示未定义。

问题定位方法:

先写一个简单的页面,引用 Mixin 中的函数,测试一下。(去掉 Store)

  • test 页面中引入一张测试图片
  • 为其单独写一个 entry.js
  • entry.js 中去掉 store, filter 的注册,只保留 mixin

测试结果

页面可以正常运行。

继续定位,加入 Store 呢?

能够正常运行,但是问题出现了,所有的 Views 都被编译进了 bundle 里。

机制地 grep 了一下

grep import  -r src/store

原来罪魁祸首在 store/fetch.js, 里面引入了 router.js, 吐血。。。去掉了 router.js 的引用,文件大小缩小到了 561K. 而且编译之后可以正常运行。

测试批量编译的方法

确认问题是否还存在

发现一个问题,只有 index 页面生成的 bundle 无法引用 mixin 中的函数。改个名字试试呢?

测试方法是,copy 一份 index,命名为 home.

奇葩的事情发生了,编译之后,index 文件大小为 587 K, home 文件大小为 586K. 但是,vimdiff 了一下,并没有本质性的差异。空欢喜一场,看来改名是无效的。

再测试一下其他页面作为首页。可以看到,其他使用了同一个 mixin 函数的页面,可以正常显示。问题出在了哪里?

日,有人在 data 中使用了 mixin 的函数。。。

理论上 data 里是不应该做计算的,所以把 data 中的函数放到 template 中就正常了。。。

关于作者 🌱

我是来自山东烟台的一名开发者,有敢兴趣的话题,或者软件开发需求,欢迎加微信 zhongwei 聊聊, 查看更多联系方式

谈笑风生

Berly

请问weex中我没有使用vue的router,用mixin在entry.js引入,在组件中使用也是mixin中定义的方法也是 is not defined ,并且组件中没有单独使用mixin,是怎么回事,能给个思路吗