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
    })

以下是带有相关代码

的console.log输出

// LoginPage组件提交按钮触发登录操作

  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
      }
    })
  },

的console.log mutations.js d9b0：23 state isAuthenticated：true mutations.js d9b0：27 已提交状态currentUserId：1

此时商店应该更新......

//然后LoginPage组件推送ShoppingListsPage 当安装它时，shoudl填充购物清单

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.vue 88a1：52 即将为当前用户提供商店购物

    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
          })
        },

的console.log

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

Getters从商店返回未定义的值

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

更新

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的动作需要通过提交将状态作为参数传递，因此我可以在我的操作中使用getter

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

Vue.js - Vuexx：状态值未定义

1 个答案: