Vuex 状态未设置为 getter答案

【问题标题】：Vuex state not setting to getterVuex 状态未设置为 getter
【发布时间】：2021-10-31 03:28:32
【问题描述】：

我一直试图让我的操作来设置数据，以便我可以从 getter 中提取它，但由于某种原因它似乎不起作用。来自 getter 的数据始终为空白。我的参数有效负载与我的 switch 语句中的大小写匹配，并与我的初始状态中的对象匹配。我不断收到Cannot set properties of undefined (setting 'GOOGLE_DRIVE') 错误。我做错了什么？

//===============================================================================
// Initial State
//===============================================================================
const initialState = {
  users: {
    GOOGLE_DRIVE: [],
  },
}

const state = { ...initialState }

//===============================================================================
// Actions
//===============================================================================
const actions = {

  //-------------------------------------------------------------------
  // Login user
  //-------------------------------------------------------------------
  async login(state, payload) {
    console.log('login vue')
    try {
      switch (payload) {
        case 'GOOGLE_DRIVE': {
          console.log('payload', payload)
          const GoogleUser = await googleAuth.signIn()
          const user = {
            isSignedIn: GoogleUser.isSignedIn(),
            name: GoogleUser.getBasicProfile().getName(),
            image: GoogleUser.getBasicProfile().getImageUrl(),
            email: GoogleUser.getBasicProfile().getEmail(),
            accessToken: GoogleUser.getAuthResponse().access_token,
            meta: GoogleUser.getAuthResponse(),
            isActive: false
          }
          console.log('user', user)
          //state.users[payload] = user
          //state.commit('users', { GOOGLE_DRIVE: user })
          console.log('user', state)
          break;
        }
        default: 
          throw Error(`invalid drive name, ${payload}`);
      }
    } catch (err) {
      console.error(`[login]: `, err);
    }
  },
}

//===============================================================================
// Mutations
//===============================================================================
const mutations = {

  //-------------------------------------------------------------------
  // Reset State
  //-------------------------------------------------------------------
  [RESET_STATE]() {
    Object.keys(initialState).forEach(key => { state[key] = initialState[key] })
  }
}

//===============================================================================
// Getters
//===============================================================================
const getters = {
  users(state, payload, drive) {
    console.log('opayload', payload)
    console.log('drive', drive)
    console.log('get state', state)
    state.users = {  }
  },
}

【问题讨论】：

为什么要在 getter 中添加 state.users = { } 行？
在内部操作中也应该是commit('users', { GOOGLE_DRIVE: user }) 而不是state.commit('users', { GOOGLE_DRIVE: user })
它是空白的，因为它还没有设置。你可以看到我在 getter 上为数据做控制台。

标签： vue.js vuex

【解决方案1】：

action 中的第一个参数是 Vuex 上下文。您已将其命名为 state 并尝试从中访问 state.users，所以我相信您错误地假设它是 Vuex 状态。注意users在上下文中不存在，所以它会是undefined，然后users['GOOGLE_DRIVE']会导致你观察到的错误：

const actions = {
  async login(state, payload) {
              ^^^^^ ❌ arg1 is context, not state
    ⋮
    state.users[payload] = user  // ❌ state.users is undefined
  }
}

然而在 Vuex 3 中，动作不应该直接改变状态。那应该被移到一个 Vuex 突变中：

const mutations = {
  'SET_USERS'(state, users) {
    state.users = { ...state.users, ...users }
  }
}

然后该操作可以通过上下文的commit() 调用突变：

const actions = {
  async login({ commit }, payload) {
    ⋮
    commit('SET_USERS', { GOOGLE_DRIVE: user })
  }
}

最后，你的 getter 没有正确声明。其中的参数和状态分配使您的 getter 看起来像一个突变。修复 getter：

Getter 接收 state as its 1st argument and any other getters as the 2nd argument，因此请删除其他参数。
它需要返回一些东西，通常基于它的 state 参数（例如，users getter 应该返回 state.users）。
Getter 不应改变 Vuex 状态，因此请移除 state.users 分配。

getter 应该如下所示：

const getters = {
  users: state => state.users,
}

demo

【讨论】：