詳解 Vue Vuex 實踐

詳解 vue & vuex 實踐翻譯自vue + vuex — getting started

，承接自2017 vue.js 2快速入門指南，從屬於web 前端入門與工程實踐

。

隨著應用複雜度的增加，我們需要考慮如何進行應用的狀態管理，將業務邏輯與介面交互相剝離，詳細討論參考筆者的2016-我的前端之路:工具化與工程化。vue 為我們提供了方便的元件內狀態管理的機制，下面這個例子就是常見的獲取列表資料然後渲染到介面中：

import axios from 'axios'
export default 
},methods: , (err) => )}},
mounted: function () 
}

，類似於 redux 的集中式狀態管理工具來輔助解決這個問題。

根據 vuex

文件中的描述，vuex 是適用於 vue.js 應用的狀態管理庫，為應用中的所有元件提供集中式的狀態儲存與操作，保證了所有狀態以可**的方式進行修改。

vuex 中 store 的模板化定義如下：

import vue from 'vue'
import vuex from 'vuex'
vue.use(vuex)
const store = new vuex.store(,
actions: ,
mutations: ,
getters: ,  
modules: 
})export default store

上述**中包含了定義 vuex store 時關鍵的 5 個屬性：

state: 
}

actions: ) )
}, (err) => )}}

mutations: ) => 
}

getters: 
}

在理解了 vuex 的基礎概念之後，我們會建立乙個真正的應用來熟悉整個使用流程。該應用承接自這個部落格

，在準備好基礎專案之後，我們需要將 vuex 引入專案中：

$ yarn add vuex

該步驟完成之後，我們需要在 src 目錄下建立名為 store 的目錄來存放狀態管理相關**，首先建立 index.js:

import vue from 'vue'
import vuex from 'vuex'
import axios from 'axios'
vue.use(vuex)
const store = new vuex.store(,
actions: ,
mutations: ,
getters: 
})export default store

然後在 main.js 檔案中我們需要將該 store 例項新增到構造的 vue 例項中：

import store from './store'
/* eslint-disable no-new */
new vue(

然後，我們需要去完善 store 定義：

import vue from 'vue'
import vuex from 'vuex'
import axios from 'axios'
vue.use(vuex)
const store = new vuex.store(,
actions: ) )
}, (err) => )}},
mutations: ) => 
},getters: 
}})export default store

在本專案中，我們將原本存放在元件內的專案陣列移動到 store 中，並且將所有關於狀態的改變都通過 action 進行而不是直接修改：

// /src/components/projectlist.vue
project name
assigned to
priority
completed
}}}

這個模板還是十分直觀，我們通過computed物件來訪問 store 中的狀態資訊。值得一提的是這裡的mapstate函式，這裡用的是簡寫，完整的話可以直接訪問 store 物件：

computed: 
}

mapstate 是 vuex 提供的簡化資料訪問的輔助函式。我們視線回到 project.vue 容器元件，在該元件中呼叫this.$store.dispatch('load_project_list)來觸發從服務端中載入專案列表：

project list

當我們啟動應用時，vuex 狀態管理容器會自動在資料獲取之後渲染整個專案列表。現在我們需要新增新的 action 與 mutation 來建立新的專案：

// under actions:
add_new_project: function () )
}, (err) => )
}// under mutations:
add_project: (state, ) =>

然後我們建立乙個簡單的用於新增新的專案的元件 addproject.vue:

add new project

該元件會派發某個 action 來新增元件，我們需要將該元件引入到 projects.vue 中：

project list

重新執行下該應用會看到服務端返回的建立成功的提示，現在我們新增另乙個功能，就是允許使用者將某個專案設定為已完成。我們現在新增新的元件 completetoggle.vue:

該元件會展示乙個用於切換專案是否完成的按鈕，我們通過 props 傳入具體的專案資訊然後通過觸發 toggle_completed action 來使服務端進行相對應的更新與相應：

// actions
toggle_completed: function (, ) )
}, (err) => )
}// mutations
update_project: (state, ) =>

update_project 會觸發專案列表移除對應的專案並且將服務端返回的資料重新新增到陣列中：

let project = data.filter(function (p) )

if (project.length > 0) else })

最後一步就是將 completetoggle 元件引入到 projectlist 元件中，然後將其新增到列表中：

// new column in table
// be sure import and add to the components object

現在我們的應用已經具備了基本的特性，這裡我們再度回顧下文首的討論，為什麼我們需要大費周章的引入外部狀態管理，將業務邏輯切分到元件外。譬如這裡我們需要另乙個元件來展示專案的統計資訊，譬如專案的總數或者已完成專案的數目。我們肯定要避免重複地從服務端抓取資料，而是所謂的 single source of truth。這裡我們新增新的 projectstatus.vue 元件來展示專案的統計資訊：

project status:
number of projects: }
completed: }

該元件會展示專案的總數與已完成專案的總數，上面我們使用了maogetters輔助函式來減少冗餘**：

getters: ,
projectcount: state => 
}

最後我們將該統計資訊新增到專案列表中，效果圖示如下：

詳解 Vue Vuex 實踐

vue vuex基本使用

vue vuex 輪詢排程

關於vue，vuex總結

詳解 Vue Vuex 實踐

vue vuex基本使用

vue vuex 輪詢排程

關於vue，vuex總結

相關推薦