Vue.js - Vuexx：状態値が定義されていません

Question

ユーザーログイン認証（LoginPageコンポーネント）後、currentUserIdはストアに設定されますが、後で別のコンポーネント（ShoppingLists）で取得しようとすると、未定義の値が返されます...私の流れ？ここ

は、ここに私のstore.js

import Vue from 'vue' 
    import Vuex from 'vuex' 
    import getters from '@/vuex/getters' 
    import actions from '@/vuex/actions' 
    import mutations from '@/vuex/mutations' 

    import vueAuthInstance from '../services/auth.js' 

    Vue.use(Vuex) 

    const state = { 
     shoppinglists: [], 
     isAuthenticated: vueAuthInstance.isAuthenticated(), 
     currentUserId: '' 
    } 

    export default new Vuex.Store({ 
     state, 
     mutations, 
     getters, 
     actions 
    }) 

あるコード

// LoginPageコンポーネントの関連部分とにconsole.log出力ボタンは、ログインアクション

methods: _.extend({}, mapActions(['login']), { 
    clearErrorMessage() { 
     this.hasError = false 
    }, 
    submit() { 
     return this.login({user: { email: this.email, password: this.password }}) 
     .then((logged) => { 
     if (logged) { 
      this.$router.push('shoppinglists') 
     } else { 
      this.hasError = true 
     } 
     }) 
    } 
    }), 

を発射提出されていますaction.js

login: ({ commit }, payload) => { 
    payload = payload || {} 
    return vueAuthInstance.login(payload.user, payload.requestOptions) 
    .then((response) => { 
    // check response user or empty 
     if (JSON.stringify(response.data) !== '{}') { 
     commit(IS_AUTHENTICATED, { isAuthenticated: true }) 
     commit(CURRENT_USER_ID, { currentUserId: response.data.id }) 
     return true 
     } else { 
     commit(IS_AUTHENTICATED, { isAuthenticated: false }) 
     commit(CURRENT_USER_ID, { currentUserId: '' }) 
     return false 
     } 
    }) 
    }, 

？ mutations.js d9b

にconsole.log：23 状態にisAuthenticated：？真 mutations.jsをd9b0：27 コミット状態がcurrentUserId：1

をこの時点でストアを更新する必要があります....

//取り付けられ、それはshoppinglists

methods: _.extend({}, mapActions(['populateShoppingLists', 'createShoppingList']), { 
    addShoppingList() { 
    let list = { title: 'New Shopping List', items: [] } 
    this.createShoppingList(list) 
    } 
}), 
store, 
mounted: function() { 
    this.$nextTick(function() { 
    console.log('GOING TO POPULATE STORE SHOPPINGLISTS FOR CURRENT USER') 
    this.populateShoppingLists() 
    }) 
} 

にconsole.log ShoppingListsPage.vを移入shoudlときにLoginPageコンポーネントはShoppingListsPage プッシュUE 88a1：？現在のユーザーのSTOREのSHOPPINGLISTSを投入しようとして52 にconsole.log

getters.js?d717:9 
     GETTERS: currentUserId: undefined 

ゲッターが店

 getCurrentUserId: (state) => { 
     console.log('GETTERS: currentUserId: ', state.currentUserId) 
     return state.currentUserId 
     },  

UPDATE

から未定義の値を返す

actions.js?a7ea:9 
     TRYING TO GET currentUserId with GETTERS 

     populateShoppingLists: ({ commit }) => { 
      console.log('TRYING TO GET currentUserId with GETTERS') 
      const currentUserId = getters.getCurrentUserId({ commit }) 
      console.log('ACTIONS: populateShoppingLists for user: ', currentUserId) 
      return api.fetchShoppingLists(currentUserId) 
      .then(response => { 
      commit(POPULATE_SHOPPING_LISTS, response.data) 
      return response 
      }) 
      .catch((error) => { 
      throw error 
      }) 
     }, 

mutations.js

import * as types from './mutation_types' 
    import getters from './getters' 
    import _ from 'underscore' 

    export default { 
     [types.POPULATE_SHOPPING_LISTS] (state, lists) { 
     state.shoppinglists = lists 
     }, 
     [types.IS_AUTHENTICATED] (state, payload) { 
     console.log('committed state isAuthenticated: ', payload.isAuthenticated) 
     state.isAuthenticated = payload.isAuthenticated 
     }, 
     [types.CURRENT_USER_ID] (state, payload) { 
     console.log('committed state currentUserId: ', payload.currentUserId) 
     state.currentUserId = payload.currentUserId 
     } 
    } 

mutation_types

export const POPULATE_SHOPPING_LISTS = 'POPULATE_SHOPPING_LISTS' 
    export const IS_AUTHENTICATED = 'IS_AUTHENTICATED' 
    export const CURRENT_USER_ID = 'CURRENT_USER_ID' 

Answer 1

は、私がコミットすると、パラメータとしての状態を渡すためにアクションpopulateShoppingLists 必要性を修正し、問題を解決したので、私は使用することができます私の行動の中のゲッター

populateShoppingLists: ({ commit, state }) => { 
    let currentUserId = getters.currentUserId(state) 
    console.log('currentUserId: ', currentUserId). // => userId: 1 Ok 
    return api.fetchShoppingLists(currentUserId)