Vuex 状态未设置为 getter

Question

我一直在尝试让我的操作来设置数据，以便我可以从 getter 中提取它，但由于某种原因它似乎不起作用。 getter 中的数据始终为空白。我的参数 payload 与我的 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 = {  }
  },
}

Answer 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：

Getters 收到 state as its 1st argument and any other getters as the 2nd argument，所以删除其他参数。
它需要 return 某些东西，通常基于其 state 参数（例如，users getter 应该 return state.users ).
Getter 不应该改变 Vuex 状态，所以删除 state.users 赋值。

getter 应该是这样的：

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

demo

Vuex 状态未设置为 getter

Vuex state not setting to getter

vue.js

vuex