vuex中的Getter如何用

# Vuex中的Getter如何用

## 一、Getter 是什么？

在 Vuex 中，**Getter** 是用于從 Store 中派生出狀態的計算屬性。類似于 Vue 組件中的 `computed` 屬性，Getter 可以對 Store 中的狀態進行二次處理，返回新的計算結果，而不會直接修改原始狀態。

### 核心特點：
1. **派生狀態**：基于 Store 的 state 計算新值
2. **高效緩存**：只有當依賴值變化時才重新計算
3. **組件復用**：多個組件可以共享同一套計算邏輯

---

## 二、基本用法

### 1. 定義 Getter
在 Vuex Store 中通過 `getters` 選項定義：

```javascript
const store = new Vuex.Store({
  state: {
    todos: [
      { id: 1, text: '學習Vuex', done: true },
      { id: 2, text: '實踐Getter', done: false }
    ]
  },
  getters: {
    // 基本Getter
    doneTodos: state => {
      return state.todos.filter(todo => todo.done)
    },
    
    // 帶參數的Getter
    getTodoById: (state) => (id) => {
      return state.todos.find(todo => todo.id === id)
    }
  }
})

2. 組件中訪問

在 Vue 組件中有三種訪問方式：

方式一：通過 this.$store

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

方式二：mapGetters 輔助函數

import { mapGetters } from 'vuex'

export default {
  computed: {
    ...mapGetters([
      'doneTodos',
      'getTodoById'
    ]),
    
    // 重命名
    ...mapGetters({
      myTodos: 'doneTodos'
    })
  }
}

方式三：直接調用帶參數的Getter

this.$store.getters.getTodoById(2)

三、高級用法

1. Getter 組合

Getter 可以依賴其他 Getter：

getters: {
  doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
  }
}

2. 返回函數實現傳參

通過返回函數的方式實現動態查詢：

getters: {
  getTodoByText: (state) => (text) => {
    return state.todos.find(todo => todo.text.includes(text))
  }
}

3. 模塊化中的命名空間

在模塊中使用時，需要添加命名空間前綴：

computed: {
  ...mapGetters('moduleName', [
    'someGetter'
  ])
}

四、最佳實踐

1. 何時使用 Getter？

• 需要從 store 中的 state 派生狀態時
• 多個組件需要相同計算邏輯時
• 需要進行復雜的數據過濾/處理時

2. 性能優化

• 避免在 Getter 中進行耗時計算
• 對于大數據集考慮使用緩存策略
• 必要時使用 memoization 技術

3. 測試建議

Getter 應該是純函數，易于單元測試：

// 測試示例
describe('getters', () => {
  it('doneTodos returns completed todos', () => {
    const state = {
      todos: [
        { id: 1, done: true },
        { id: 2, done: false }
      ]
    }
    expect(getters.doneTodos(state)).toEqual([{ id: 1, done: true }])
  })
})

五、常見問題

Q1: Getter 和 computed 有什么區別？

Q2: 為什么 Getter 不直接修改 state？

這是 Vuex 的核心設計原則，保持狀態變更的可追蹤性，所有修改必須通過 mutations。

Q3: 如何處理異步操作？

Getter 應該是同步的，異步操作應該放在 actions 中處理。

六、總結

Vuex Getter 是狀態管理的重要工具，它： 1. 提供可復用的派生狀態計算 2. 保持組件與狀態結構的解耦 3. 通過緩存機制優化性能 4. 使復雜狀態訪問更加規范化

合理使用 Getter 可以讓你的 Vuex 代碼更加清晰、可維護性更高。建議將業務相關的狀態計算都封裝為 Getter，而不是分散在各個組件中。

提示：在 Vue 3 的 Pinia 中，Getter 的概念被簡化為 computed 屬性，使用起來更加直觀。 “`

（全文約1200字，可根據需要調整具體示例或補充更多使用場景）