[Vue] 跟著Vue 闖蕩前端世界 | vue session取得
本文將介紹 Vuex的使用方式(模組化Store),並且利用 Vuex掌握全站讀取中的webapi數量狀態,自動依據該狀態來自動呈現loading互動效果。前言網站中多少都會有全域共用的狀態需要保存,若在狀態改變時無需有立即畫面響應變化的情況下,多數會使用cookie/session/localstorage來存放,但有些情境需要在狀態改變時主動響應來產生畫面互動效果,此時可以透過Vuex來管理這些響應式的狀態資料。本文透過實務範例來說明如何使用Vuex來管理「讀取中WebAPI數量」狀態,並透過這個狀態來產生一些畫面效果應用。以下介紹。vuex:3.0.1 定義Module檔...
本文將介紹 Vuex 的使用方式 ( 模組化 Store ),並且利用 Vuex 掌握全站讀取中的 web api 數量狀態,自動依據該狀態來自動呈現 loading 互動效果。
前言網站中多少都會有全域共用的狀態需要保存,若在狀態改變時無需有立即畫面響應變化的情況下,多數會使用 cookie / session / local storage 來存放,但有些情境需要在狀態改變時主動響應來產生畫面互動效果,此時可以透過 Vuex 來管理這些響應式的狀態資料。本文透過實務範例來說明如何使用 Vuex 來管理「讀取中 Web API 數量」狀態,並透過這個狀態來產生一些畫面效果應用。以下介紹。
vuex: 3.0.1
定義 Module 檔案
在使用 vuex 之前必須先定義出各 module 檔案,可以依照存放的狀態類型做分類,讓我們將「狀態」及「狀態操作邏輯」都封裝於此。以下以 app 模組說明 module 中須放置的項目有哪些。
State
定義全域「狀態名稱」及「初始值」,於此定義 loadingCounter 作為全站讀取中 API 的計數器。
const state = { loadingCounter: 0 }於組件中取得狀態方式的兩種方式如下: 1. 在自定義的 computed 屬性中回傳 this.$store.state.app.loadingCounter 2. 使用 ...mapState(app, [loadingCounter ]) 直接加到 computed 屬性中
Mutation
允許直接更改 Vuex 的 store 中狀態的唯一方法,透過提交 (commit) 特定 mutation 來修改狀態資料,非常類似事件的概念,需要定義事件類型 (type) 和回調函數 (handl...