Vuex狀態未設定為getter

我一直試圖讓我的動作來設定資料，這樣我就可以從 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 = {  }
  },
}

uj5u.com熱心網友回復：

動作中的第一個引數是 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 看起來像一個突變。要修復吸氣劑：

1. Getters 接收state作為它的第一個引數和任何其他 getter 作為第二個引數，因此洗掉其他引數。
2. 它需要回傳一些東西，通常基于它的state引數（例如，usersgetter 應該回傳state.users）。
3. Getters 不應改變 Vuex 狀態，因此洗掉state.users分配。

吸氣劑應該是這樣的：

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

演示

標籤：Vue.js Vuex

上一篇：Vue.js不呈現串列中的元素

下一篇：一個組件VueJs中有兩個不同的陣列