Centralized State Management for Vue.jshtml
僅有22行代碼 壓縮以後1K 實現VUE狀態管理,實現異步同步調用vue
# install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view the bundle analyzer report npm run build --report
demo.
github實例代碼.webpack
1. package.json add "vuext":"1.0.0" 2. create js file named "tpodata"(any) 3. open main.js and . import {tpostore,vuext} from "./vuext"; . Vue.use(vuext) .new Vue({ el: '#app', router, tpostore:tpostore(tpodata), template: '<App/>', components: { App } }) 4. {{this.$tpo.name}} 5. change this.$tpo.name="XXX" 6. function used this.$tpo.getName()
const tpodata={//public data name:"VUEXT", ls:[1,2,3], getName(name){ //異步的實現 //成功以後回調,commit name數據 this.name=name } } tpodata.head={ //part data name:"lixiaolong" } export default tpodata;
該代碼只支持VUE2.0版本git
1 如何得到全局狀態中的值 this.$tpo 2 如何修改全局狀態中的值 this.$tpo.name="XXX" 3 若是是數組 請使用 push pop shift 等原生方法操做 4 如何調用方法 this.$tpo.getName()
export default tpodata;
For detailed explanation on how things work, checkout the guide and docs for vue-loader.github