Vuex—集中式狀態管理模式

Vuex 是一個專為 Vue.js 應用程序開發的狀態管理模式。它采用集中式存儲管理應用的所有組件的狀態，并以相應的規則保證狀態以一種可預測的方式發生變化。

以上是 Vuex 官方文檔給出的定義，抓一下關鍵詞我們不妨稱之為集中式的狀態管理模式。它實際上就是將組件間的共享狀態抽取出來，以一個全局單例模式進行狀態管理，下面我們用官方文檔上的例子來對比一下兩者的使用。

1. 常用的組件狀態共享

在下面的 Vue 計數應用中，我們常用以下方式進行狀態管理。

• state：定義組件初始數據
• view：根據狀態變化更新視圖
• actions：響應用戶操作產生的狀態變化

new Vue({// statedata () {return {count: 0}},// viewtemplate: `<div>{{ count }}</div>`,// actions methods: {inc () {this.count++},dec () {this.count--}} })

每個組件內擁有自己的數據和邏輯，很好的實現了組件化化便于管理。但這種方式有極大的弊端，組件的個數或者嵌套層級越多時，他們之間的狀態管理就變得十分復雜。比如兄弟組件間同步狀態需要使用 event bus，父子間組件間需要 props 屬性和 emit 觸發事件來達到目的。

2. 集中式狀態管理

為了解決上述問題，我們可以采用 Vuex。

• state：全局唯一數據源，包含全部的應用狀態。集中存儲了組件所需要的數據以進行全局的統一狀態管理。
• mutations：狀態變更方法。提交 mutations 是更改 state 的唯一方法。
  • commit：提交 mutations 的唯一方法。
• actions：負責響應用戶操作，主要是異步操作。
  • dispatch：執行 actions 的唯一方法。
• getters：類似于計算屬性 computed，可響應式獲取 state 對象。

Vue 組件接收交互行為，調用 dispatch 方法觸發 action 相關處理，若頁面狀態需要改變，則調用 commit 方法提交 mutation 修改state，通過 getters 獲取到state新值，重新渲染 Vue Components，界面隨之更新。

new Vuex.Store({state: {count: 0},mutations: {inc: state => state.count++,dec: state => state.count--} }) new Vue({el: '#app',computed: {count () {return store.state.count}},methods: {inc () {store.commit('inc')},dec () {store.commit('dec')}} })

Vuex 將所有的狀態集中管理，使得應用的數據流動和狀態變化十分清晰，簡化組件間的狀態同步與修改。

總結

對于 Vuex 的適用場景，要取決于組件間通信的復雜程度。如果較為復雜則要使用 Vuex 來簡化操作增加程序的可維護性。

轉載于:https://www.cnblogs.com/qimeng/p/8366756.html

總結

以上是生活随笔為你收集整理的Vue笔记（五）：Vuex的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。