第一次将vue实用在项目中,遇到的问题不老少;在一个小项目中最初将数据加载的代码直接写在了初始化的界面中,后来的需求修改使得数据加载的程序越来越庞大(其实也就是比最初的多了一点点),不仅看起来不美观,而且在多处调用时也十分不方便。
于是,就像把数据加载的代码独立出来放到JS文件中来使用,可直接新建JS文件并把代码扔进去似乎是不行。。。
网上各种找,最终结局了眼前的问题。
编写自定义JS文件
JS文件中定义export default
,并在install
中通过定义Vue.prototype.xxx
设置自己的方法。
loaddata.js文件代码片段:
export default {
install(Vue) {
Vue.prototype.loadRptDate = function() {
let that = this
this.$http.get("itf/tc/query_date/")
.then(function(res) {
store.commit('setRptYear', res.data.ryear);
store.commit('setRptWeek', res.data.rweek);
store.commit('setRptDate', res.data.rdate);
that.loadData();
})
.catch(function(err){
console.log(err)
});
}
Vue.prototype.loadData = function() {
... ...
Load Something ...
... ...
}
}
}
引用JS文件
在 main.js 中引入 loaddata.js import loadData from './loaddata.js'
并使用 Vue.use(loadData)
,这样之后,就可以在整个项目中就都可以通过 this 来使用自定义的函数了。
引用代码片段:
import loadData from './loaddata.js'
Vue.use(loadData)
使用JS文件中的函数
调用代码片段:
export default {
name : 'App',
store,
components: {
},
methods : {
load() {
if (store.state.isQueryDate) {
this.loadData();
} else {
this.loadRptDate();
}
},
... ...
},
data() {
return {
message: 'message',
... ...
}
},
mounted(){
this.load();
}
}
FEATURED TAGS
html
sqlite
抓取
爬虫
python
宕机
通关
游戏
ruoyi
若依
高项
论文
软考
工具
Tools
Windows
禅道
Nacos
iconfont
icon
transition
大数据
Kafka
Flume
CA
Whistle
抓包
idea
Gateway
梯子
代理
Clash
Halo
lanproxy
测试
Solo
保护费
Retropie
复古派
RaspberryPi
树莓派
KeePass
Password
密码
https
GBK
Sublime Text
CSS
微信商户
渠道
Android
redis
JMeter
CentOS
跨域
服务中心
注册中心
Consul
消息队列
RabbitMQ
SpringCloud
ssh
公钥
Mac
表情
乱码
ssl
sqlserver
jdbc
java8
阿里云
aliyun
tomcat
二维码
公众号
微信
主从
mysql
廖师兄
SpringBoot
微服务
Docker
解密
加密
CryptoJS
js
assembly
maven
blade
宝可梦
漂移
JoyCon
WiiU
npm
vue
node
定时
crontab
Linux
Switch
Nintendo Switch
archive
git
任天堂
3DS
动森
PB汉化组
汉化
动物之森
手柄
八位堂
对比
PS3
NS
nginx
blog
java