vuext 1KB 的狀態(tài)管理器

aaron 發(fā)布于2019-08-21 16:25 / 3125人閱讀

摘要：僅有行代碼壓縮之后實(shí)現(xiàn)狀態(tài)管理，實(shí)現(xiàn)異步同步調(diào)用實(shí)例代碼異步的實(shí)現(xiàn)成功之后回調(diào)，數(shù)據(jù)使用說(shuō)明該代碼只支持版本如何獲得全局狀態(tài)中的值如何修改全局狀態(tài)中的值如果是數(shù)組請(qǐng)使用等原生方法操作如何調(diào)用方法

vuext

Centralized State Management for Vue.js
僅有22行代碼 壓縮之后1K 實(shí)現(xiàn)VUE狀態(tài)管理，實(shí)現(xiàn)異步同步調(diào)用

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

demo.
github實(shí)例代碼.

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: "",
        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){
    //異步的實(shí)現(xiàn)
    //成功之后回調(diào)，commit name數(shù)據(jù)
    this.name=name
    }
}
tpodata.head={ //part data
    name:"lixiaolong"
}

export default tpodata;

使用說(shuō)明

該代碼只支持VUE2.0版本

 1 如何獲得全局狀態(tài)中的值
   this.$tpo
 2 如何修改全局狀態(tài)中的值
   this.$tpo.name="XXX"
 3 如果是數(shù)組
   請(qǐng)使用 push pop shift 等原生方法操作
 4 如何調(diào)用方法
   this.$tpo.getName()

export default tpodata;
For detailed explanation on how things work, checkout the guide and docs for vue-loader.

GPU云服務(wù)器云服務(wù)器服務(wù)器管理器的使用服務(wù)器中的資源管理器 vuext 狀態(tài)管理

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/88530.html

相關(guān)文章

Hydux: 一個(gè) Elm-like 的全功能的 Redux 替代品

摘要：剛好最近需要做一個(gè)答題小游戲的應(yīng)用，不想再上全家桶了，一是體積太大，二是無(wú)論配置還是寫起來(lái)都太繁瑣。內(nèi)置的內(nèi)置的擴(kuò)展支持內(nèi)置的熱更新模塊然后就可以了簡(jiǎn)單，可控，無(wú)痛的開發(fā)環(huán)境和代碼組織。在學(xué)習(xí)和使用 Fable + Elmish 一段時(shí)間之后，對(duì) Elm 架構(gòu)有了更具體的了解, 和預(yù)料中的一樣， Elm 風(fēng)格的框架果然還是和強(qiáng)類型的 Meta Language 語(yǔ)言更搭，只有一個(gè)字:...

DobbyKim 2019-08-21 17:59 評(píng)論0 收藏0
15個(gè)提高編程技巧的JavaScript工具

摘要：官方網(wǎng)站是一組龐大的工具，幾乎任何相關(guān)文件都可以處理。該工具是獨(dú)立的，并配有類可處理服務(wù)器端的操作。官方網(wǎng)站是一個(gè)獨(dú)立的延遲加載的圖像工具。 JavaScript腳本庫(kù)是一個(gè)預(yù)先用JavaScript語(yǔ)言寫好的庫(kù)，它方便了我們開發(fā)基于JavaScript的應(yīng)用程序，特別適合AJAX和其他一些以Web為中心的技術(shù)。JavaScript主要用于編寫嵌入或者包含在HTML頁(yè)面的函數(shù)，從而實(shí)現(xiàn)...

LiangJ 2019-08-22 10:56 評(píng)論0 收藏0
淺談模塊化加載的實(shí)現(xiàn)原理

摘要：如果你不太明白模塊化的作用，建議看看玉伯寫的一篇文章。我們可以使用自己的方式去管理代碼，不過(guò)有人已經(jīng)研究處理一套標(biāo)準(zhǔn)，而且是全球統(tǒng)一，那就拿著用吧關(guān)于規(guī)范，我這里就不多說(shuō)了，可以去看看草案，玉伯也翻譯了一份。試發(fā)一彈，本文同步自：http://barretlee.com 略蛋疼的是不支持: [title][url reference] 相信很多人都用過(guò) seajs、 require...

CodeSheep 2019-08-21 12:09 評(píng)論0 收藏0
javascript功能插件大集合，寫前端的親們記得收藏

摘要：一個(gè)專注于瀏覽器端和兼容的包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。完全插件化的工具，能在中識(shí)別和記錄模式。健壯的優(yōu)雅且功能豐富的模板引擎。完整的經(jīng)過(guò)充分測(cè)試和記錄數(shù)據(jù)結(jié)構(gòu)的庫(kù)。【導(dǎo)讀】：GitHub 上有一個(gè) Awesome – XXX 系列的資源整理。awesome-javascript 是 sorrycc 發(fā)起維護(hù)的 JS 資源列表...

cfanr 2019-08-20 10:34 評(píng)論0 收藏0
javascript功能插件大集合前端常用插件 js常用插件

摘要：轉(zhuǎn)載來(lái)源包管理器管理著庫(kù)，并提供讀取和打包它們的工具。能構(gòu)建更好應(yīng)用的客戶端包管理器。一個(gè)整合和的最佳思想，使開發(fā)者能快速方便地組織和編寫前端代碼的下一代包管理器。很棒的組件集合。隱秘地使用和用戶數(shù)據(jù)。轉(zhuǎn)載來(lái)源：https://github.com/jobbole/aw... 包管理器管理著 javascript 庫(kù)，并提供讀取和打包它們的工具。?npm – npm 是 javasc...

netmou 2019-08-23 12:28 評(píng)論0 收藏0