vuex入門案例

前言

此次發表的項目，這對我來講是一場革命。記錄着第一次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網址