Javascript 我的Vuex表单获取第一个字段，但不获取第二个字段，默默失败

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

以及一些相关的MapTranslations、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)
  }
}

我认为问题出在TriggeradBarAction：

triggerAddBarAction:{dispatch，state，commit}=>{ 如果state.barNameToCreate==返回 常量栏={name:state.barNameToCreate} 提交“setBarNameToCreate”， 调度'createUserBar'，bar },

---

它将barNameToCreate添加到bar中，但对barAddressToCreate没有任何作用。bar然后被传递给createUserBar进行服务器调用。

我想我们需要查看存储代码的相关部分。@Skillle好的，刚刚编辑的TriggeradBarAction将barNameToCreate添加到bar，但它对barAddressToCreate没有任何作用。@Skille my G。。你说对了！我完全想念它。现在是固定的，如果你想发布答案，我将标记这一个。。。非常感谢！

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