我的 Vuex 表单获得了第一个字段，但没有获得第二个字段，静默失败

Question

我刚开始使用 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>

当我提交表单时，我得到第一个字段，但没有第二个字段，控制台中也没有任何错误：

我错过了什么？

这里有一些相关的文件存储结构：

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

Answer 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 以进行服务器调用。