vuex入門案例

roundstones 發布于2019-08-23 11:36 / 2571人閱讀

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

前言

這次發表的項目，這對我來說是一場革命。記錄著第一次GitHub發布項目，記錄著最初學習vuex的頭昏腦脹，也記錄著懷揣對react的一腔熱血后卻步履闌珊后，再次回看vue時那種感覺。所以說這個項目對我很有意思，麻雀雖小，五臟俱全。

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

正文

這是一個類似于發表評論的功能，在vuex中實現增刪功能，要點在于評論每五秒更新一下時間。項目主要分為4個組件：HelloWorld.vue、comment_input.vue、comment_list.vue、comment.vue。項目效果及排版如下

?vuex概念

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

????????store

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

????????state

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

????????actions

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

????????mutations

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

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

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

基本思路流程就是這么運作的，寫法上官網也有規范化寫法。下面轉戰到項目中。

項目 ? ? comment_input

這個組件主要發表收集信息，獲取到username、content、time這個三個屬性，然后存儲到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

這個組件是每條的評論，在comment_list循環的子組件，將接受的用戶名、內容、時間渲染上，并將時間沒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

項目比較小，就將所有狀態寫到一個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))
}

}


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
























    }
}

項目就這樣愉快的結束了，歡迎提出疑問和bug...
GitHub網址

云服務器 GPU云服務器 python入門案例 javascript入門案例 Vuex vuex cdn

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/97189.html

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

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

Cheriselalala 2019-08-26 11:56 評論0 收藏0
ES6入門到進階（二）：循環、數組、對象

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

JerryZou 2019-08-26 11:47 評論0 收藏0
基于vue-cli的單元測試案例

摘要：的單元測試最近項目開發臨近結尾，反思之前做的不足的地方，想著應該引入測試類的做法，于是乎開始學習前端測試之類的文檔。本次主要提供可使用，可運行的單元測試代碼，不足之處，歡迎指出。 vue-cli的單元測試最近項目開發臨近結尾，反思之前做的不足的地方，想著應該引入測試類的做法，于是乎開始學習前端測試之類的文檔。因為項目是基于vue-cli的單頁面，所以想著在此基礎上拓展。測試框架類型...

CoXie 2019-08-26 17:40 評論0 收藏0
Vuex10分鐘入門

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

idisfkj 2019-08-23 15:38 評論0 收藏0
超簡單入門Vuex小示例

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

linkin 2019-08-22 13:52 評論0 收藏0