vuext 1KB 的狀態管理器

vuext

Centralized State Management for Vue.jshtml

僅有22行代碼 壓縮以後1K 實現VUE狀態管理,實現異步同步調用vue

Build Setup

# 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

eg

demo.
github實例代碼.webpack

start

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()

tpodata.js

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

相關文章
相關標籤/搜索