1x1 Vuex 核心 - Getter & Action: 掌控 Vuex 状态与行为

前端

2023-09-22 19:32:09

引言

Vuex 是一个专为 Vue.js 应用程序设计的轻量级状态管理库，它使得管理应用程序状态变得更加轻松、高效和可维护。在 Vuex 中，状态是集中存储的，而 Getter 和 Action 则分别用于派生计算属性和处理事件。

Getter: 计算状态派生的属性

Getter 允许您基于一个或多个状态派生出全新的状态。您可以将它们看做是 Store 的计算属性，它们可以访问 Store 中的所有状态，并根据需要返回计算结果。

使用 Getter 的好处有很多：

提高代码的可重用性：Getter 可以将复杂的计算逻辑封装起来，以便在多个组件中重用，避免重复编写相同的代码。
增强代码的可读性：Getter 可以将复杂的状态计算逻辑与组件逻辑分离，使代码更易于阅读和理解。
提高性能：Getter 可以通过缓存计算结果来提高性能，因为它们只会在需要时才重新计算。

实例：

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  getters: {
    // 计算属性：将 count 增加 1
    incrementedCount: state => {
      return state.count + 1
    }
  }
})

// component.js
const Component = {
  computed: {
    // 使用 getter 作为计算属性
    incrementedCount: () => {
      return store.getters.incrementedCount
    }
  }
}

在组件中，您可以使用 incrementedCount 计算属性来访问 Getter 返回的值。

Action: 处理事件并更新状态

Action 用于处理事件并更新状态。它们类似于方法，但它们并不是直接在组件中调用，而是通过 Store 来调用。

使用 Action 的好处也有很多：

提高代码的可重用性：Action 可以将复杂的事件处理逻辑封装起来，以便在多个组件中重用，避免重复编写相同的代码。
增强代码的可测试性：Action 可以独立于组件进行测试，使代码更易于测试和维护。
简化组件代码：Action 可以将复杂的操作从组件中移出，使组件代码更简洁和易于管理。

实例：

// store.js
const store = new Vuex.Store({
  state: {
    count: 0
  },
  actions: {
    // 事件处理：增加 count
    incrementCount: ({ commit }) => {
      commit('INCREMENT_COUNT')
    }
  },
  mutations: {
    // 提交 mutation 来更新状态
    INCREMENT_COUNT: state => {
      state.count++
    }
  }
})

// component.js
const Component = {
  methods: {
    // 调用 action 来处理事件
    incrementCount: () => {
      store.dispatch('incrementCount')
    }
  }
}

在组件中，您可以使用 incrementCount 方法来调用 Action，从而更新 Store 中的状态。