iT邦幫忙

第 12 屆 iT 邦幫忙鐵人賽

DAY 27
0
自我挑戰組

與Vue相遇系列 第 27

Day027-透過Vuex-實作簡易部落格-列舉及刪除文章

Vue:昨日,我們已將文章新增實做出來了!現在只要將文章列舉在首頁,只需要使用之前學到的v-for迴圈,即可完成!
https://ithelp.ithome.com.tw/upload/images/20201011/201306545fak48Im00.jpg
透過 v-for,將vuex中state的articles資料渲染到畫面上,其HTML如下:

 <tbody>
        <tr v-for="(item,index) in articles" :key="index">
          <td>{{index+1}}</td>
          <td>{{item.date |transferDate}}</td>
          <td class="trchange">{{item.content | transferContent}}</td>
          <td>
            <button id="fixed" @click="$router.push(`/article/${item.id}`)">修改</button><button id="delete" @click="deleteHandler(item.id)">刪除</button>
          </td>
        </tr>
</tbody>

但記得,要使用store的資料,記得要引入喔!這邊就先將mapState和mapActions一起引入吧!

import {mapState,mapActions} from "vuex";
computed:{
    ...mapState(["articles"])
},

這樣,你就可以得到上面的結果嚕!

Vue:但是文章主要是透過ID來進行辨認,昨日我們設置了假的ID為ArticleID。但如果每一篇文章都是同樣ID,是無法辨認出哪一篇需要修改或刪除。所以,這邊我們使用一個套件lodash:
在專案下,利用npm寫入指令:

npm install lodash

安裝好之後,回到store,並引入lodash:

import _ from "lodash"

並且我們修改給予的ID:

actions: {
    addArticle: ({ commit }, payload) => {
      const ID = _.random(1000)
      payload.id = "ArticleID"+ID
      commit('addArticle', payload)
    }
 }

透過vue devtool來觀察建立ID的樣子:
https://ithelp.ithome.com.tw/upload/images/20201011/20130654XPJOnJRcLZ.jpg
如此,我們便可以透過這個ID找到相對應的文章,進行刪除或修改喔!
HTML綁定事件:

<button id="delete" @click="deleteHandler(item.id)">刪除</button>

methods:
https://ithelp.ithome.com.tw/upload/images/20201011/20130654qqllRpG7e5.jpg
紅色框框部分,是需要在vuex邏輯中dispatch Actions:
https://ithelp.ithome.com.tw/upload/images/20201011/20130654ZarkPa7w4t.jpg
https://ithelp.ithome.com.tw/upload/images/20201011/20130654bxhQtlOS3z.jpg
如此,便可以輕鬆刪除文章嚕~~

待續


上一篇
Day026-透過Vuex-實作簡易部落格-新增文章
下一篇
Day028-透過Vuex-實作簡易部落格-修改文章
系列文
與Vue相遇30

尚未有邦友留言

立即登入留言