https://github.com/jiangshanmeta/vue-config
https://github.com/jiangshanmeta/vue-config
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/jiangshanmeta/vue-config
- Owner: jiangshanmeta
- License: mit
- Created: 2019-05-14T02:37:39.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-03T21:48:13.000Z (almost 3 years ago)
- Last Synced: 2025-06-13T00:05:00.548Z (4 months ago)
- Language: JavaScript
- Size: 123 KB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-config
In the template of vue component, the context for the value we access is the instance of vue component. In general, we use data option for those value.For value in data option,it will be proxyed by the vue instance, so we can access through ```this``` , and it will be observable . In some cases, make value observable is uesless because we will never change it, those value only need to be proxyed by vue instance so we can access in template.
In the template of vue component, we sometimes use function.Generally,thoes functions are in methods option,like the data option above.functions in methods will be proxyed by vue instance, and also bind this.In some cases,bind this is useless, we will never access this in those functions.
In orde to handle this problem,we can use vue-config plugin.
## Install
```sh
npm install --save vue-configs
```
```js
import Vue from 'vue'
import vueConfigs from 'vue-configs'
Vue.use(vueConfigs)
```
## Usage example
In our vue component：
```js
export default{
config:{
monthList:[
{label:"January",value:1},
{label:"February",value:2},
{label:"March",value:3},
],
get totalMonth(){
return this.monthList.length;
},
},
data(){
return {
selectedMonth:[],
};
},
}
```
and we can access the ```monthList``` and ```totalMonth``` in the template
```html
-
{{item.label}}
{{totalMonth}}
```
the example above shows it also supports getter mode.
the default option we use is **config** , we can use different keys:
```js
Vue.use(vueConfigs,{
optionKeys:['config','staticMethod']
})
```
In the vue component:
```js
export default{
config:{
},
staticMethod:{
echo(data){
return data;
},
},
}
```