├── .eslintrc.js ├── tslint.json ├── .gitignore ├── .travis.yml ├── testem.yml ├── src ├── tsconfig.json └── index.ts ├── tsconfig.base.json ├── .github └── issue_template.md ├── scripts ├── webpack.config.test.js └── rollup.config.js ├── LICENSE ├── README.md └── package.json /.eslintrc.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /tslint.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "tslint-config-ktsn" 3 | } 4 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules/ 2 | typings/ 3 | .DS_Store 4 | **/.DS_Store 5 | /lib/ 6 | /dist/ 7 | /.tmp/ 8 | -------------------------------------------------------------------------------- /.travis.yml: -------------------------------------------------------------------------------- 1 | language: node_js 2 | node_js: 3 | - "10" 4 | cache: npm 5 | script: 6 | - npm run lint 7 | - npm run test 8 | - npm run build 9 | -------------------------------------------------------------------------------- /testem.yml: -------------------------------------------------------------------------------- 1 | --- 2 | framework: mocha 3 | src_files: 4 | - .tmp/test.js 5 | launch_in_dev: 6 | - Chrome 7 | browser_args: 8 | Chrome: 9 | - --headless 10 | - --disable-gpu 11 | - --remote-debugging-port=9222 -------------------------------------------------------------------------------- /src/tsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "../tsconfig.base.json", 3 | "compilerOptions": { 4 | "baseUrl": ".", 5 | "paths": { "*": ["types/*"] }, 6 | "outDir": "../lib", 7 | "declaration": true 8 | }, 9 | "include": [ 10 | "**/*.ts" 11 | ] 12 | } -------------------------------------------------------------------------------- /tsconfig.base.json: -------------------------------------------------------------------------------- 1 | { 2 | "compileOnSave": false, 3 | "compilerOptions": { 4 | "target": "es5", 5 | "module": "es2015", 6 | "moduleResolution": "node", 7 | "lib": [ 8 | "dom", 9 | "es2015" 10 | ], 11 | "allowSyntheticDefaultImports": true, 12 | "noImplicitAny": true, 13 | "noImplicitReturns": true, 14 | "noImplicitThis": true, 15 | "strictNullChecks": true 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /.github/issue_template.md: -------------------------------------------------------------------------------- 1 | 16 | -------------------------------------------------------------------------------- /scripts/webpack.config.test.js: -------------------------------------------------------------------------------- 1 | const path = require('path') 2 | const glob = require('glob') 3 | 4 | module.exports = { 5 | mode: 'development', 6 | entry: ['es6-promise/auto'].concat(glob.sync(path.resolve(__dirname, '../test/**/*.ts'))), 7 | output: { 8 | path: path.resolve(__dirname, '../.tmp'), 9 | filename: 'test.js' 10 | }, 11 | resolve: { 12 | extensions: ['.ts', '.js'] 13 | }, 14 | module: { 15 | rules: [ 16 | { test: /\.ts$/, loaders: ['webpack-espower-loader', 'ts-loader'] } 17 | ] 18 | }, 19 | devtool: 'source-map' 20 | } 21 | -------------------------------------------------------------------------------- /src/index.ts: -------------------------------------------------------------------------------- 1 | import Vuex from 'vuex' 2 | 3 | const VueGlobalVariable = { 4 | install(Vue: any, options: any) { 5 | 6 | options = options || {} 7 | // const store = options.store || {state:{}} 8 | Vue.use(Vuex) 9 | const store = new Vuex.Store({state: {}}) 10 | 11 | const globals = options.globals || {} 12 | 13 | Object.keys(globals).forEach((key: string) => { 14 | (window as any)[`${key}`] = globals[key] 15 | Vue.set(store.state, key, globals[key]) 16 | }) 17 | 18 | const computed = {} 19 | Object.keys(globals).forEach((key) => { 20 | (computed as any)[`${key}`] = () => globals[key] 21 | }) 22 | 23 | Vue.mixin({ 24 | computed 25 | }) 26 | } 27 | } 28 | 29 | export default VueGlobalVariable 30 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Copyright (c) 2017 katashin 2 | 3 | Permission is hereby granted, free of charge, to any person obtaining a copy 4 | of this software and associated documentation files (the "Software"), to deal 5 | in the Software without restriction, including without limitation the rights 6 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 7 | copies of the Software, and to permit persons to whom the Software is 8 | furnished to do so, subject to the following conditions: 9 | 10 | The above copyright notice and this permission notice shall be included in 11 | all copies or substantial portions of the Software. 12 | 13 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 14 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 15 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 16 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 17 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 18 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN 19 | THE SOFTWARE. 20 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | License 4 | 5 | 6 | npm version 7 | 8 | 9 | HitCount 10 | 11 | 12 | size 13 | 14 |

15 | 16 | # vue-global-var 17 | 18 | Reactive global variable can be sharable between components 19 | 20 | [Demo](https://mudin.github.io/vue-global-var-demo/) 21 | 22 | ## Dependencies 23 | 24 | - [Vue](https://github.com/vuejs/vue) 25 | - [Vuex](https://github.com/vuejs/vuex) 26 | 27 | ## Installation 28 | 29 | ```bash 30 | $ npm install --save vue-global-var 31 | ``` 32 | 33 | ## How to use 34 | 35 | ```js 36 | Vue.use(VueGlobalVar, { 37 | globals: { 38 | $user: new User('user1'), 39 | obj:{}, 40 | config:Config, 41 | .... 42 | }, 43 | }); 44 | ``` 45 | 46 | Now just use `this.$user` is any component or `$user` in its template 47 | 48 | ## License 49 | 50 | MIT 51 | -------------------------------------------------------------------------------- /scripts/rollup.config.js: -------------------------------------------------------------------------------- 1 | const replace = require('rollup-plugin-replace') 2 | const meta = require('../package.json') 3 | 4 | const banner = `/*! 5 | * ${meta.name} v${meta.version} 6 | * ${meta.homepage} 7 | * 8 | * @license 9 | * Copyright (c) 2017 ${meta.author} 10 | * Released under the MIT license 11 | * ${meta.homepage}/blob/master/LICENSE 12 | */` 13 | 14 | const config = { 15 | input: 'lib/index.js', 16 | output: { 17 | name: 'vueGlobalVariable', 18 | globals: { 19 | vue: 'Vue', 20 | vuex: 'Vuex' 21 | }, 22 | banner 23 | }, 24 | plugins: [], 25 | external: [ 26 | 'vue', 27 | 'vuex' 28 | ] 29 | } 30 | 31 | switch (process.env.BUILD) { 32 | case 'commonjs': 33 | config.output.file = `dist/${meta.name}.cjs.js` 34 | config.output.format = 'cjs' 35 | break 36 | case 'development': 37 | config.output.file = `dist/${meta.name}.js` 38 | config.output.format = 'umd' 39 | config.plugins.push( 40 | replace({ 41 | 'process.env.NODE_ENV': JSON.stringify('development') 42 | }) 43 | ) 44 | break 45 | case 'production': 46 | config.output.format = 'umd' 47 | config.plugins.push( 48 | replace({ 49 | 'process.env.NODE_ENV': JSON.stringify('production') 50 | }) 51 | ) 52 | break 53 | default: 54 | throw new Error('Unknown build environment') 55 | } 56 | 57 | module.exports = config 58 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "vue-global-var", 3 | "version": "1.0.0", 4 | "author": "mudin", 5 | "description": "Reactive global variable can be sharable between components", 6 | "keywords": [ 7 | "vue", 8 | "vuex", 9 | "reactive", 10 | "global-variable", 11 | "share" 12 | ], 13 | "license": "MIT", 14 | "main": "dist/vue-global-var.cjs.js", 15 | "module": "lib/index.js", 16 | "typings": "lib/index.d.ts", 17 | "files": [ 18 | "dist", 19 | "lib" 20 | ], 21 | "homepage": "https://github.com/mudin/vue-global-var", 22 | "bugs": { 23 | "url": "https://github.com/mudin/vue-global-var/issues" 24 | }, 25 | "repository": { 26 | "type": "git", 27 | "url": "git+https://github.com/mudin/vue-global-var.git" 28 | }, 29 | "scripts": { 30 | "clean": "rm -rf lib dist .tmp", 31 | "build": "run-s build:ts build:cjs build:dev build:prod", 32 | "build:ts": "tsc -p src", 33 | "build:cjs": "rollup -c scripts/rollup.config.js --environment BUILD:commonjs", 34 | "build:dev": "rollup -c scripts/rollup.config.js --environment BUILD:development", 35 | "build:prod": "rollup -c scripts/rollup.config.js --environment BUILD:production | uglifyjs -mc warnings=false --comments -o dist/vue-global-var.min.js", 36 | "watch:test": "webpack --watch --config scripts/webpack.config.test.js", 37 | "lint": "tslint \"src/**/*.ts\" && tslint \"test/**/*.ts\"", 38 | "testem": "testem", 39 | "dev": "run-p watch:test testem", 40 | "test": "webpack --config scripts/webpack.config.test.js && testem ci --launch PhantomJS" 41 | }, 42 | "devDependencies": { 43 | "@types/mocha": "^5.2.0", 44 | "@types/power-assert": "1.5.0", 45 | "@types/sinon": "^4.3.3", 46 | "es6-promise": "^4.2.4", 47 | "glob": "^7.1.2", 48 | "json-loader": "^0.5.7", 49 | "npm-run-all": "^4.1.3", 50 | "power-assert": "^1.5.0", 51 | "rollup": "^0.58.2", 52 | "rollup-plugin-replace": "^2.0.0", 53 | "sinon": "^5.0.7", 54 | "testem": "^2.4.0", 55 | "ts-loader": "^4.3.0", 56 | "tslint": "^5.10.0", 57 | "tslint-config-ktsn": "^2.1.0", 58 | "typescript": "^2.8.3", 59 | "uglify-js": "^3.3.25", 60 | "webpack": "^4.8.3", 61 | "webpack-cli": "^3.2.3", 62 | "webpack-espower-loader": "^2.0.0" 63 | }, 64 | "dependencies": { 65 | "vue": "^2.6.6", 66 | "vuex": "^3.1.0" 67 | }, 68 | "directories": { 69 | "lib": "lib" 70 | } 71 | } 72 | --------------------------------------------------------------------------------