成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

vuex入門案例

roundstones / 2573人閱讀

摘要：說到老四了，最苦逼的家伙了，活都讓他干了，活總得干完一個(gè)說一個(gè)吧，所以他基本上同步進(jìn)行的。

前言

這次發(fā)表的項(xiàng)目，這對(duì)我來說是一場(chǎng)革命。記錄著第一次GitHub發(fā)布項(xiàng)目，記錄著最初學(xué)習(xí)vuex的頭昏腦脹，也記錄著懷揣對(duì)react的一腔熱血后卻步履闌珊后，再次回看vue時(shí)那種感覺。所以說這個(gè)項(xiàng)目對(duì)我很有意思，麻雀雖小，五臟俱全。

在寫這個(gè)項(xiàng)目之前，我正在試水react，那種函數(shù)式編程+jsx語法深深吸引了我，然后在react的世界里游啊游啊，mmp的，發(fā)現(xiàn)找不到岸邊了，越學(xué)感覺react越精深，也越感覺自己會(huì)的太少，后來更是被redux虐的遍體鱗傷。然后一氣之下把大胡子的react教材案例用vue寫出來....對(duì)react的感覺現(xiàn)在只想唱一首《涼涼》。當(dāng)然了，等沉淀一段時(shí)間后，必繼續(xù)搞react。。。

正文

這是一個(gè)類似于發(fā)表評(píng)論的功能，在vuex中實(shí)現(xiàn)增刪功能，要點(diǎn)在于評(píng)論每五秒更新一下時(shí)間。項(xiàng)目主要分為4個(gè)組件：HelloWorld.vue、comment_input.vue、comment_list.vue、comment.vue。項(xiàng)目效果及排版如下

?vuex概念

講述一下我心中vuex的概念，只記住四個(gè)名詞就行了store、state、actions、mutations。剩下的一些modules、getters以及map的屬性都是在上面名詞上繁衍過來的，了解上面的四個(gè)，基本再看看文檔就搞定了

????????store

老大store，顧名思義商店的意思。他就是代表了整個(gè)vuex。他就是老大，剩下三個(gè)都是他小弟，老大的作用就是把三個(gè)小弟，帶入vue中，然后基本就不管事了，所以store的作用基本就是在main.js中new Vue的時(shí)候注入進(jìn)去，就沒他的事了，剩下就看他們?nèi)齻€(gè)小弟秀操作了。三個(gè)小弟，他們各司其職互不干擾，又互相聯(lián)系。

????????state

再說老二state，翻譯過來就是狀態(tài)的意思。他就是管理狀態(tài)的，他的存在就好比其他組件中的data一模一樣。但是data的范圍只能是在本組件中，要是其他組件想獲取要么父子props，子父$emit。要是隔了好幾層的組件，來回傳，還不累死啊。也就是vuex誕生的原因。組件data中怎么寫，state也就怎么寫。你在data中生命的變量，假如說a吧，可以直接this.a獲取到。同樣在state聲明的a啊話，只需要把他老大那個(gè)層級(jí)寫上就好了this.$store.state.a就闊以了

????????actions

再說老三actions，動(dòng)作的意思。他就是一個(gè)最懶的，欺軟怕硬的家伙，上面有老大、老二干不過，只能懟老四了，人家交給他的活，他就開始bb指揮老四。actions的作用就是下面組件點(diǎn)擊事件的事情告訴他，開始干活了，然后他就對(duì)老四說，開始干活了，有時(shí)候有小活了，人家都懶得搭理直接讓老四干了。這家伙嘴快能干異步的活。

????????mutations

說到老四了，最苦逼的家伙了，活都讓他干了，活總得干完一個(gè)說一個(gè)吧，所以他基本上同步進(jìn)行的。把老三指揮的活一個(gè)一個(gè)干，改變數(shù)據(jù)的事就落在肩膀上了。

再說到老大了store，感覺很厲害的樣子，但是他頂上還有vue啊，所以他們四個(gè)都是給vue的打工仔。vue的兒子多啊，每個(gè)組件都是他的兒子。老板的兒子需要幫忙了。難道你們四個(gè)能閑著嗎？但是他想指揮vuex干活得使用他老爹給他的一個(gè)口諭啊。vue給各個(gè)組件說，想讓vuex幫忙了，就用dispatch這個(gè)命令就行了。

所以他們的干活流程就是，老大store，帶三個(gè)小弟state、actions、mutations給vue打工，把他們注入到vue公司后，就不管他們了，vue的組件兩個(gè)兒子都想用一個(gè)數(shù)據(jù)，在自己組件里聲明，又太遠(yuǎn)不好拿了，就讓老二state專門管，以后想用數(shù)據(jù)了直接this.$store.state.xx,后來又想改這個(gè)數(shù)據(jù)了，就用它老爹的口諭dispatch，告訴老三要干嘛，但是老三懶啊，就把要干的讓老四mutations干了。

基本思路流程就是這么運(yùn)作的，寫法上官網(wǎng)也有規(guī)范化寫法。下面轉(zhuǎn)戰(zhàn)到項(xiàng)目中。

項(xiàng)目 ? ? comment_input

這個(gè)組件主要發(fā)表收集信息，獲取到username、content、time這個(gè)三個(gè)屬性，然后存儲(chǔ)到vuex的state里面

bandUserBtn(){

? ? ? let userName = this.$refs.inputUserName.value;

? ? ? if (!userName || !this.content) {

? ? ? ? alert("信息不能為空");

? ? ? ? return

? ? ? }

? ? ? let comment = {

? ? ? ? username : userName,

? ? ? ? content : this.content,

? ? ? ? dataTime : +new Date()

? ? ? }

? ? ? this.$store.dispatch("addMessage",comment)

? ? },
comment

這個(gè)組件是每條的評(píng)論，在comment_list循環(huán)的子組件，將接受的用戶名、內(nèi)容、時(shí)間渲染上，并將時(shí)間沒5秒更新一次

?`??swift

created(){

? ? this._updateTimeString();

? ? this.timer = setInterval(this._updateTimeString,5000)

? },

? methods:{

? ? _updateTimeString(){

? ? ? ? let comment = this.message;

? ? ? ? let duration = (+Date.now() - comment.dataTime) / 1000;

? ? ? ? this.timeString = duration > 60

? ? ? ? ? ? ? ? ? ? ? ? ? ${Math.round(duration / 60)} 分鐘前

? ? ? ? ? ? ? ? ? ? ? ? : ${Math.round(Math.max(duration, 1))} 秒前

? ? ? ? return? this.timeString

? ? },

? ? handleDeleteComment(index){

? ? ? this.$store.dispatch("handleDeleteComment",index)

? ? }

? },

? beforeDestroy(){

? ? clearInterval(this.timer);? ? ? ?

? ? this.timer = null;

? }

### vuex

項(xiàng)目比較小，就將所有狀態(tài)寫到一個(gè)js里面了

const state = {

comments:localStorage["comments"]?JSON.parse(localStorage["comments"]):[],

}

const actions = {

addMessage:({commit},comment)=>commit("getComments",comment),
handleDeleteComment:({commit},index)=>commit("handleDeleteComment",index)

}

const mutations ={

getComments(state,comment){
    console.log(state.comments)
    state.comments.push(comment);
    localStorage.setItem("comments",JSON.stringify(state.comments))    
},
handleDeleteComment(state,index){
    console.log(index)
    state.comments.splice(index,1);
    localStorage.setItem("comments",JSON.stringify(state.comments))
}

}


項(xiàng)目就這樣愉快的結(jié)束了，歡迎提出疑問和bug...
[GitHub網(wǎng)址](https://github.com/fang1995meng0714/comment-list)
























    }
}

項(xiàng)目就這樣愉快的結(jié)束了，歡迎提出疑問和bug...
GitHub網(wǎng)址

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

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

相關(guān)文章

  • vue中vuex,echarts,地圖,ueditor的使用

    摘要：獲取富文本內(nèi)容地圖我是使用高德地圖在全局導(dǎo)入為我申請(qǐng)的也可以自己去申請(qǐng)高德地圖官網(wǎng)案例 前言 今天是個(gè)好日子,大家六一快樂;vue-cli生成的template還需要配置axios,vuex,element等插件,該項(xiàng)目中將這些常用插件進(jìn)行了配置;項(xiàng)目開發(fā)中template可以快速?gòu)?fù)用,也是可以快速上手vue的一個(gè)demo; 1.動(dòng)態(tài)效果圖 showImg(https://segmen...

    Cheriselalala 評(píng)論0 收藏0

  • ES6入門到進(jìn)階（二）：循環(huán)、數(shù)組、對(duì)象

    摘要：優(yōu)點(diǎn)按需加載可以寫中路徑也可以動(dòng)態(tài)加以后默認(rèn)就是嚴(yán)格模式，默認(rèn)嚴(yán)格模式完參考視頻資料經(jīng)典入門到進(jìn)階 上一篇：ES6入門到進(jìn)階（一）：let、解構(gòu)賦值、字符串模板、函數(shù) 一、循環(huán) ES5里面新增一些東西 1.1 arr.forEach()(常用) 1. for for(let i=0; i [{t:aaaa}] let arr = [ ...

    JerryZou 評(píng)論0 收藏0

  • 基于vue-cli的單元測(cè)試案例

    摘要：的單元測(cè)試最近項(xiàng)目開發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測(cè)試類的做法，于是乎開始學(xué)習(xí)前端測(cè)試之類的文檔。本次主要提供可使用，可運(yùn)行的單元測(cè)試代碼，不足之處，歡迎指出。 vue-cli的單元測(cè)試 最近項(xiàng)目開發(fā)臨近結(jié)尾，反思之前做的不足的地方，想著應(yīng)該引入測(cè)試類的做法，于是乎開始學(xué)習(xí)前端測(cè)試之類的文檔。因?yàn)轫?xiàng)目是基于vue-cli的單頁(yè)面，所以想著在此基礎(chǔ)上拓展。 測(cè)試框架類型...

    CoXie 評(píng)論0 收藏0

  • Vuex10分鐘入門

    摘要：它采用集中式存儲(chǔ)管理應(yīng)用的所有組件的狀態(tài)，并以相應(yīng)的規(guī)則保證狀態(tài)以一種可預(yù)測(cè)的方式發(fā)生變化。寫需要的組件創(chuàng)建一個(gè)組件，懟下面的內(nèi)容，你喜歡彬哥哪一點(diǎn)創(chuàng)建一個(gè)展示組件我喜歡彬哥打開，刪掉沒用的東西，直接懟下面的代碼，到這里，架子就搭好了。 通過本文你將： 1.知道什么是Vuex. 2.知道為什么要用Vuex. 3.能跑一個(gè)Vuex的例子。 4.了解相關(guān)概念，面試的時(shí)候能說出一個(gè)所以然 5...

    idisfkj 評(píng)論0 收藏0

  • 超簡(jiǎn)單入門Vuex小示例

    摘要：寫在前面本文旨在通過一個(gè)簡(jiǎn)單的例子，練習(xí)的幾個(gè)常用方法，使初學(xué)者以最快的速度跑起來一個(gè)的示例。生成基于的項(xiàng)目基于腳手架生成一個(gè)項(xiàng)目常用命令項(xiàng)目名進(jìn)入項(xiàng)目目錄，使用先試著跑一下。子組件可以修改父組件和自己的數(shù)據(jù)。 寫在前面 本文旨在通過一個(gè)簡(jiǎn)單的例子，練習(xí)vuex的幾個(gè)常用方法，使初學(xué)者以最快的速度跑起來一個(gè)vue + vuex的示例。 學(xué)習(xí)vuex需要你知道vue的一些基礎(chǔ)知識(shí)和用法。...

    linkin 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<