Моя форма Vuex получает первое поле, но не второе, молча проваливаясь

Я только начинаю с Vuex, и у меня есть форма ввода, в которой хранится только одно поле ввода, а не второе.

Я не могу просто понять, что не так. Форма находится на следующей странице компонента

$ cat src/components/AddBar.vue 



Когда я отправляю форму, я получаю первое поле, но не второе, и никаких ошибок в консоли:

enter image description here

Чего мне не хватает?

Здесь есть некоторая соответствующая структура хранилища файлов:

$ ls -l src/store/bars/
total 20
-rw-r--r-- 1 lsoave lsoave 1400 Jun 24 18:59 bars.actions.js
-rw-r--r-- 1 lsoave lsoave  297 Jun 24 18:59 bars.getters.js
-rw-r--r-- 1 lsoave lsoave  890 Jun 26 21:37 bars.mutations.js
-rw-r--r-- 1 lsoave lsoave  136 Jun 26 21:33 bars.state.js
-rw-r--r-- 1 lsoave lsoave  231 Jun 24 18:59 index.js

и некоторые относительные mapMutations, mapState, Содержание mapActions:

$ cat src/store/bars/index.js
import state from './bars.state'
import mutations from './bars.mutations'
import actions from './bars.actions'
import getters from './bars.getters'

export default {
  namespaced: true,
  state,
  mutations,
  actions,
  getters
}

$ cat src/store/bars/bars.mutations.js
export default {
  /* Bar input name */
  setBarNameToCreate: (state, barNameToCreate) =>
    (state.barNameToCreate = barNameToCreate),

  /* Bar input address*/
  setBarAddressToCreate: (state, barAddressToCreate) =>
    (state.barAddressToCreate = barAddressToCreate),

  /* Bars */
  setBars: (state, bars) => (state.bars = bars),
  addBar: (state, bar) => state.bars.push(bar),
  removeBarById: (state, barId) => {
    const index = state.bars.findIndex(bar => bar.id === barId)
    state.bars.splice(index, 1)
  },

  /* Bars deletion */
  addBarDeletionPending: (state, barId) => state.barDeletionPending.push(barId),
  removeBarDeletionPending: (state, barId) => {
    const index = state.bars.findIndex(bar => bar.id === barId)
    state.barDeletionPending.splice(index, 1)
  },

  /* Bar creation */
  setBarCreationPending: (state, value) => (state.barCreationPending = value)
}

$ cat  src/store/bars/bars.state.js
export default {
  bars: null,
  barNameToCreate: '',
  barAddressToCreate: '',
  barDeletionPending: [],
  barCreationPending: false
}

$ cat  src/store/bars/bars.actions.js
import UserBarsDB from '@/firebase/user-bars-db'

export default {
  /**
   * Fetch bars of current loggedin user
   */
  getUserBars: async ({ rootState, commit }) => {
    const userBarDb = new UserBarsDB(rootState.authentication.user.id)

    const bars = await userBarDb.readAll()
    commit('setBars', bars)
  },

  /**
   * Create a bar for current loggedin user
   */
  createUserBar: async ({ commit, rootState }, bar) => {
    const userBarDb = new UserBarsDB(rootState.authentication.user.id)

    commit('setBarCreationPending', true)
    const createdBar = await userBarDb.create(bar)
    commit('addBar', createdBar)
    commit('setBarCreationPending', false)
  },

  /**
   * Create a new bar for current loggedin user and reset bar name input
   */
  triggerAddBarAction: ({ dispatch, state, commit }) => {
    if (state.barNameToCreate === '') return

    const bar = { name: state.barNameToCreate }
    commit('setBarNameToCreate', '')
    dispatch('createUserBar', bar)
  },

  /**
   * Delete a user bar from its id
   */
  deleteUserBar: async ({ rootState, commit, getters }, barId) => {
    if (getters.isBarDeletionPending(barId)) return

    const userBarsDb = new UserBarsDB(rootState.authentication.user.id)

    commit('addBarDeletionPending', barId)
    await userBarsDb.delete(barId)
    commit('removeBarById', barId)
    commit('removeBarDeletionPending', barId)
  }
}

0
задан BBJ3 27 June 2019 в 18:33
поделиться

1 ответ

Я думаю, что проблема в triggerAddBarAction:

  triggerAddBarAction: ({ dispatch, state, commit }) => {
    if (state.barNameToCreate === '') return

    const bar = { name: state.barNameToCreate }
    commit('setBarNameToCreate', '')
    dispatch('createUserBar', bar)
  },

Он добавляет barNameToCreate к bar, но ничего не делает с barAddressToCreate. bar затем передается createUserBar для выполнения вызова сервера.

2
ответ дан skirtle 27 June 2019 в 18:33
поделиться
Другие вопросы по тегам:

Похожие вопросы: