Vuex Getter 访问 RootState 问题解决指南：如何在 Getter 中获取 Store 的根状态

2024-03-11 03:46:17

利用 Vuex getter 访问 rootState：问题的解决

Vuex 概述

Vuex 是 Vue.js 中一种强大的状态管理模式，它提供了集中且可预测的方式管理应用程序状态。通过使用 getter，我们可以在不改变 store 本身的情况下获取派生数据。

在 getter 中访问 rootState

为了在 getter 中访问 rootState，我们需要传递 rootState 参数。它指向 store 的根状态对象，允许我们访问 store 中的所有数据。

以下是如何在 getter 中访问 rootState 的语法：

const getters = {
  getParams: (state, getters, rootState) => {
    return rootState.route.params
  },
}

解决示例中的问题

在给定的示例中，getter 无法访问 rootState，因为没有传递 rootState 参数。要解决此问题，需要更新 getter 如下：

const getters = {
  getParams: (state, getters, rootState) => {
    return rootState.route.params
  },
}

现在，getter 可以正确访问 rootState 并返回路由参数。

代码示例

下面是一个完整的代码示例，演示如何在 getter 中使用 rootState 参数：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    route: {
      params: {
        id: 123
      }
    }
  },
  getters: {
    getParams: (state, getters, rootState) => {
      return rootState.route.params
    },
  }
})

console.log(store.getters.getParams()) // 输出：{ id: 123 }