Vuex的四個(gè)常用核心概念

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

State

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

State 是 Vuex 中用于存儲(chǔ)應(yīng)用狀態(tài)的對(duì)象。

這些狀態(tài)是響應(yīng)式的，當(dāng)它們改變時(shí)，視圖會(huì)自動(dòng)更新。

Getters

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

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

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

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

用法：

在 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 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的事件類型 (type) 和一個(gè)回調(diào)函數(shù) (handler)。

這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(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 可以包含任意異步操作。
• 當(dāng)需要在 state 上執(zhí)行異步操作或者執(zhí)行一批 mutations 時(shí)，你可以使用 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 對(duì)象來訪問 commit 方法（或其他 Vuex 屬性）。

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

總結(jié)

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

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

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

最新評(píng)論