Vuex的四個常用核心概念

在 Vuex 中，state, getters、mutations 和 actions 是四個個核心概念，而同學們時常會搞亂其中的某些概念和用法, 這里統(tǒng)一講解一下

State

首先，我們要明確 Vuex 的核心概念 state。

State 是 Vuex 中用于存儲應用狀態(tài)的對象。

這些狀態(tài)是響應式的，當它們改變時，視圖會自動更新。

Getters

這里同學就有疑問了, vuex 的 state 明明可以直接進行訪問，為什么要畫蛇添足的加一個 Getters 呢？

其實: Getters 是用于從 state 中派生出一些狀態(tài)，例如對 state 中的數(shù)據(jù)進行過濾或計算新的值。

與直接返回 state 的值相比，getter 的返回值會根據(jù)它的依賴進行緩存。

只有在相關依賴發(fā)生改變時才會重新求值。(說人話就是減少計算成本, 提高性能)

用法：

在 store 中定義 getter：

const store = new Vuex.Store ({  
  state: {  
    todos: [  
      { id: 1, text: '...', done: true },  
      { id: 2, text: '...', done: false }  
    ]  
  },  
  getters: {  
    doneTodos: state => {  
      return state.todos.filter (todo => todo. done)  
    }  
  }  
})

在組件中使用 getter：

computed: {  
  doneTodos () {  
    return this.$store. getters. doneTodos  
  }  
}

Mutations

Mutations 是 Vuex 中用于更改 state 的唯一方法（ 記住, 是唯一的喲）。

Vuex 中的 mutations 非常類似于事件：每個 mutation 都有一個字符串的事件類型 (type) 和一個回調函數(shù) (handler)。

這個回調函數(shù)就是我們實際進行狀態(tài)更改的地方，并且它會接受 state 作為第一個參數(shù)。

const store = new Vuex.Store ({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment (state) {  
      // 變更狀態(tài)  
      state.count++  
    }  
  }  
})
在組件中提交 mutation：

javascript
methods: {  
  increment () {  
    this.$store.commit ('increment')  
  }  
}

Actions

那么 actions 和 mutations 有什么區(qū)別呢?

Actions 類似于 mutations，不同在于：

• Action 提交的是 mutation，而不是直接變更狀態(tài)。
• Action 可以包含任意異步操作。
• 當需要在 state 上執(zhí)行異步操作或者執(zhí)行一批 mutations 時，你可以使用 actions。

用法：

在 store 中定義 action：

const store = new Vuex.Store ({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increment (state) {  
      state. count++  
    }  
  },  
  actions: {  
    incrementAsync ({ commit }) {  
      setTimeout (() => {  
        commit ('increment')  
      }, 1000)  
    }  
  }  
})

在組件中分發(fā) action：

methods: {  
  incrementAsync () {  
    this.$store.dispatch('incrementAsync')  
  }  
}

注意：

在 actions 中，你可以通過 context 對象來訪問 commit 方法（或其他 Vuex 屬性）。

為了方便，我們可以直接解構 commit 出來，就像上面的例子那樣。

總結

• State：存儲應用的狀態(tài)。
• Getters：基于 state 計算屬性，并可以緩存結果。
• Mutations：直接更改 state 的唯一方式，且必須是同步函數(shù)。
• Actions：類似于 mutations，用于提交 mutations，可以包含任意異步操作。

這四個概念共同構成了 Vuex 的核心功能，使得狀態(tài)管理在 Vue 應用中變得清晰、可預測和可維護。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論