學習 Vuex 狀態管理模式(上)

認識 Vuex & 搭建環境

Jacy Chu

6 min readJun 21, 2021

📢 Vuex 系列文章分為上、中、下 (共 3 篇)

📋 目錄

Vuex 介紹
搭建環境 & Vuex 安裝
專案結構說明
[實作]專案練習介紹

Vuex 介紹

Vuex 是 Vue.js 官方提供的狀態管理模式工具。採用集中式管理應用的所有組件的狀態。構建一個大型的單頁面應用程序(Single Page Application)，組建之間溝通會用到關係復雜的 $emit 和 props，Vuex 可以統一管理跨結構組建溝通。

Vuex 中的 state 負責儲存狀態。當組件需要更動狀態時，必須透過 actions 發出一個 commit 去呼叫 mutations，再由 mutations 去更改 state。

搭建環境 & Vuex 安裝

1. 安裝Node.js

🔎 Node官網下載
開起終端機並輸入以下內容，如有顯示版號則表示安裝成功。

node: node -v
npm: npm -v

🔖 補充說明
node.js:能夠在伺服器端運行JavaScript的開放原始碼、跨平台執行環境。
npm:隨同node.js一起安裝的管理工具，進行套件的安裝及管理。

2. 安裝Vue

🔎 Vue.js官網下載(此範例屬 Vue2 版本)
使用 Vue 構建大型應用時，推薦使用 NPM 安裝。

$ npm install vue

NPM 能很好地和諸如 Webpack 或 Browserify 的CommonJS模塊打包器配合使用。Vue.js 也提供配套工具來開發單文件組件。

🔖 補充說明
使用Vue構建小型應用，可用cdn方式引用至html檔案。
<script src=”https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script>

3. 安裝Vue CLI

Vue CLI 由 Vue.js 團隊開發，提供開發者快速建置 Vue 專案並整合相關工具鍊的指令列(Command Line)工具。內建 Hot Reload、 ES Lint 與 dec-Server等功能。

$ npm install -g @vue/cli

4. 建立Vue專案

開起終端機至欲建立專案的路徑，輸入下方指令。
(my-vuex-project 為範例專案名稱，可以修改成自己想要的檔名)

$ vue create my-vuex-project

建立的過程中會出現：

❓Please pick a preset:
➡️ Manually select features
❓Check the features needed for your project:
➡️ Babel, Vuex, Linter/Formatter
❓Choose a version of Vue.js that you want to start the project with:
➡️ 2.x

🔖 補充說明
Babel:JavaScript 轉譯器，可將ES6+程式碼轉為等效的ES5程式碼
Vuex:Vue.js官方的狀態管理模式工具，協助跨結構組建溝通
Linter/Formatter:編碼風格檢查

專案結構說明

專案結構介紹如上圖，可以至終端機輸入下方指令。

$ cd my-vuex-project
$ npm run serve

開啟瀏覽器，網址輸入 http://localhost:8080 進入首頁。

main.js
可以看到 store 被引用

store/index.js
Vuex 是插件，在 Vue 對象中進行註冊，使用 Vue.use() 進行註冊。
store 是每一個 Vuex 應用核心，包含應用中大部分的狀態(state)。Vuex 和一般全局對象不同之處：

Vuex 的狀態存儲是響應式的。當 Vue 組件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的組件也會相應地得到高效更新。
不能直接改變 store 中的狀態。改變 store 中狀態的唯一途徑必須顯式提交(commit) mutation，方便追蹤每個狀態的變化。

[實作]專案練習介紹

專案建立好，接下來會是做中學的模式🛠

🚩 由於 Vuex 學習重點在於狀態管理，而非 Vue.js 基本練習。本系列將基於預設檔案上，加入預先準備專案的 GitHub 檔案 🔗 (專案資料夾名稱：vue-example-Bicycles)，直接著手修改下載的檔案。

🚩 實作練習的主題設定為 Bicycle Rental Shop。一間腳踏車出租店的系統，以次數計費，店家固定資產為 20 輛腳踏車，若租出去(按下-1按鈕)，下方 Total Income 乘數會連動+1，若有人來還車(按下+1按鈕)，不會影響下方 Total Income。當腳踏車數量為 20 ，+1按鈕會呈現 disabled 狀態，當數量為 0，-1按鈕會呈現 disabled 狀態，並顯示 No bike is available。按下 Reset All 按鈕，腳踏車數量回到預設值 20，下方 Total Income 歸零。

🚩 Vuex 實作練習將會延用此檔案，請先將下載的檔案，妥善地加到 Vuex 專案中。瀏覽器網址輸入 http://localhost:8080 ，開啟專案畫面如下所示。