Vue 常用操作

全局常量、函数

  • Plugin

新建 Constants.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
export default {

install(Vue, options) {
Vue.prototype.G = Object.freeze({

/**
* ROLE OF SYSTEM USER
*/
USER_ROLE : {
STU: 'Students',
TRAIN: 'Trains',
ADMIN: 'Admins'
},

/**
* num of question option.
*/
OPTION_NUM : {
0: 'A',
1: 'B',
2: 'C'
}
})
}
}

新建 Function.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
export default {
install(Vue, options) {

// Class Method
Date.prototype.format = _format

// F Method
Vue.prototype.F = Object.freeze({
clone : _clone
})
}
}

function _format () {
...
}

function _clone () {
...
}

在 main.js 中引入 Constants.js、Function.js 并应用

1
2
3
4
5
import G from './common/Constants'
import F from './common/Function'

Vue.use(G)
Vue.use(F)

在 组件中可以直接调用

1
2
3
4
5
let date = new Date().format('yyyyMMdd HH:mm:ss')
let _date = this.F.clone(date)

console.log(this.G.USER_ROLE.STU)
console.log(this.G.OPTION_NUM[0])

以上常量挂在使用 Object.freeze() 是安全操作,常量内容不会被改变;
常量挂载点 G、F 可省略,此处为全局调用方便区分;

  • Vue.prototype

直接使用 Vue.prototype 挂在常量,在 main.js 中挂载如下

1
2
3
4
5
6
7
8
Vue.prototype.USER_ROLE = Object.freeze({
STU : 'Stu',
ADMIN : 'Admin'
})

Vue.prototype.clone = function (obj) {
...
}

在组件中可以直接调用

1
2
3
let date = this.clone(new Date())

console.log(this.USER_ROLE.STU)