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

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

0 голосов
/ 27 июня 2019

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

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

$ cat src/components/AddBar.vue 
<template>
  <div class="action-bar">
    <input
      placeholder="bar name..."
      class="bar-input"
      type="text"
      :value="barNameToCreate"
      @input="setBarNameToCreate($event.target.value)"
      @keypress.enter="triggerAddBarAction"
    />
    <input
      placeholder="address..."
      class="bar-input"
      type="text"
      :value="barAddressToCreate"
      @input="setBarAddressToCreate($event.target.value)"
      @keypress.enter="triggerAddBarAction"
    />
    <div
      :class="{ disabled: barCreationPending }"
      class="create-bar-btn"
      @click="triggerAddBarAction"
    >
      add bar
    </div>
  </div>
</template>

<script>
import { mapMutations, mapState, mapActions } from 'vuex'

export default {
  computed: mapState('bars', [
    'barNameToCreate',
    'barAddressToCreate',
    'barCreationPending'
  ]),
  methods: {
    ...mapMutations('bars', ['setBarNameToCreate', 'setBarAddressToCreate']),
    ...mapActions('bars', ['triggerAddBarAction'])
  }
}
</script>

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

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 content:

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

1 Ответ

1 голос
/ 27 июня 2019

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

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

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

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

...