Vue.js – vuex 狀態管理

入門前最後需了解的一個 library ，vuex 這集中式存儲管理所有組件的資料狀態. 當一個 app 在做非同步處理時，我們希望可以有個 Loading 的畫面可以讓使用者知道 app 是有在 work 的，一般都是把這個功能做在主頁面上，其它的子頁面都是呼叫主頁面的 method 來 enable/disable，這個時候就是 vuex 上場的時機了.

Vuex 這個部份網路上已有很多的介紹了，請自行善用 Google 大神吧.

Vuex 觀念

vuex 官網流程圖

首先我們依照官網的步驟安裝 vuex

image

在來在 src 下新增一個 store 的資料夾，裡面分別有 5 隻 js 檔案

image

分別在各個 js 檔案中撰寫相對應的程式碼.

mutations_types.js

image

mutations.js

image

getters.js

image

actions.js

image

index.js

image

按著在 main.js 中引用 store 中的 js 檔案.

image

接著我們修改 App.vue 這個 main page

image

接著修改 component  的程式碼

image

如此就可以在切換頁面時出現 Loading 的效果.

image

PS : 這個時候在 run 時會有 error 的問題， “ …mapActions “ 這個 method 無法 compile，需安裝Stage 2 preset 來 bypass 這個錯誤訊息.相關的訊息如下:

https://forum-archive.vuejs.org/topic/5023/i-am-getting-an-error-when-i-use-mapgetters-on-vuex-2-0

https://babeljs.io/docs/plugins/preset-stage-2/

.babelrc file

image

留言

張貼留言

這個網誌中的熱門文章

WPF - 深入 Style

圖片
Style 用來在類型的不同實例之間共享屬性、資源和事件處理程序，您可以將 Style 看作是將一組屬性值應用到多個元素的捷徑。 　　這是MSDN上對Style的描述，翻譯的還算中規中矩。Style（樣式），簡單來說，就是一種對屬性值的批處理，類似于Html的CSS，可以快速的設置一系列屬性值到UI元素。   示例 　　一個最簡單的Style的例子： <Window> <Grid> <Grid.Resources> <Style TargetType="{x:Type Button}" x:Key="ButtonStyle"> <Setter Property="Height" Value="22"/> <Setter Property="Width" Value="60"/> </Style> </Grid.Resources> <Button Content="Button" Style="{StaticResource ButtonStyle}"/> <Button Content="Button" Style="{StaticResource ButtonStyle}" Margin="156,144,286,145" /> </Grid> </Window> 　　關于Resources的知識，請參見 MSDN ，這里創建了一個目標類型為Button的ButtonStyle，兩個Button使用靜態資源（ StaticResource ）的查找方式來找到這個Style。Style中定義了Button的高度（Height）和寬度（Width），當使用了這個Style后，兩個Button無需手動設置，即可自動設置...
閱讀完整內容

C# – M$ Chart Control 自定 ToolTip 的顯示

圖片
在使用 M$ Chart Control 來顯示 Chart 時, 一般的 Requirments 其 ToolTip 在顯示一般都為 X/Y Value，可是當有特別的資料需顯示時，那又該如何呢？在其 DataPoint Class 中提供一個SetCustomProperty Member 讓 User 可以設定其 Custom Property Value，那只需在 Series Class 中設定 ToolTipProperty 後，其 ToolTip 即可顯示 Custom Property. Series s = new Series(); s.Name = "SeriesName"; s.ChartType = SeriesChartType.Line; s.MarkerStyle = MarkerStyle.Circle; s.MarkerSize = 8; s.BorderWidth = 3; s.ToolTip = "Wafer Id: #AXISLABEL\n" + "Time: #CUSTOMPROPERTY(TIME) \n" + "Y Value: #VALY";
閱讀完整內容

Vue.js - 基礎介紹教學

今年的 iT邦幫忙鐵人賽中剛好就有位鐵人利用了 30 天的時間，天天一篇文章從頭到尾來介紹 vue.js 的基礎教學，這真的是太佛心來了，在此記錄一下也方便以後有需要的時候可以直接取得相關的訊息. vue & vuex 01 - Vue Introduction & 鐵人賽說明 vue & vuex 02 - 使用 Vue-cli 安裝 vue 和 webpack 環境與相關套件 vue & vuex 03 - Hello World & 雙向綁定 vue & vuex 04 - 使用 vue-router 建構 Single Page Application vue & vuex 05 - 攝氏轉換華氏工具 - I (computed) vue & vuex 06 - 攝氏轉換華氏工具 - II (v-if, v-show, methods) vue & vuex 07 - component - I (元件拆解，合併，靜態資料引用) vue & vuex 08 - component - II (v-for 小幫手解決重複元件) vue & vuex 09 - component - III (slot 在元件上鑽洞) vue & vuex 10 - 什麼是 vuex? vue & vuex 11 - 計數器 - I (vuex 職權與流程說明) vue & vuex 12 - 計數器 - II (action, mutation 傳遞資料) vue & vuex 13 - 經典 todo list - I (create, read) vue & vuex 14 - 經典 todo list - II (改變狀態與 delete) vue & vuex 15 - 經典 todo list - III (update) vue & vuex 16 - 自訂按鈕 custom checkbox ($emit, $on) vue & vuex 17 - 覺得 store 有點亂，動手拆成 modules 吧！ vue & vuex 18 - 開發小技巧 vue ...
閱讀完整內容