调用vuex操作时状态变量变为未定义

Question

错误讯息：Error: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field articleName) 我正在尝试将表单中的变量添加到Firebase Cloud Firestore数据库中。我使用vuex进行全局状态管理。当我将变量从我的CreateSale组件传递到sale-＆gt;状态时，它们会被定义。但是当我在提交表单时调用actionSale操作时，状态变量是未定义的。一切都应该正确设置。我注册了Vuex以及配置的firebase。

sale.js（vuex模块）

createSale(state, getters) {
  console.log(state.articleName) //undefined
  db.collection('clothes').add({
    articleName: state.articleName,
    description: state.description,
    brand: state.brand,
    price: state.price,
    imagesRefs: getters.fileRefs
  }).then(docRef => {
    for (var i = 0; i < state.files.length; i++) {

    }
    this.$router.push('/')
  }).catch(error => alert(error.message))
}

CreateSale.vue 模板：

<div class="container" id="createSale">
<form @submit.prevent="createSale" class="col s12">
  <div class="row">
    <div class="input-field col s12">
      <input type="text" v-model="articleName" v-on:change="setArticleName(articleName)" required>
      <label>Article Name</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input type="text" v-model="description" v-on:change="setDescription(description)" required>
      <label>Description</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input type="text" v-model="brand" v-on:change="setBrand(brand)" required>
      <label>Brand</label>
    </div>
  </div>
  <div class="row">
    <div class="input-field col s12">
      <input style="padding-top: 16px;" type="number" v-model="price" v-on:change="setPrice(price)" required>
      <label>Price</label>
    </div>
  </div>
  <UploadFile />
  <button type="submit" class="btn btn-success">Submit</button>
  <router-link to="/" class="btn grey">Cancel</router-link>
</form>

脚本：

export default {
name: 'createSale',
components: {
  UploadFile
},
data() {
  return {
    articleName: '',
    description: '',
    brand: '',
    price: ''
  }
},
methods: {
  ...mapMutations('sale', [
    'setArticleName',
    'setDescription',
    'setBrand',
    'setPrice'
  ]),
  ...mapActions('sale', {
    createSale: 'createSale',
    console: 'console'
  })
}

Answer 1

您的行动需要

createSale({state, getters}) {
  console.log(state.articleName) //undefined
  db.collection('clothes').add({
    articleName: state.articleName,
    description: state.description,
    brand: state.brand,
    price: state.price,
    imagesRefs: getters.fileRefs
  }).then(docRef => {
    for (var i = 0; i < state.files.length; i++) {

    }
    this.$router.push('/')
  }).catch(error => alert(error.message))
}

传递给action的第一个参数是context对象，你需要从这个上下文对象中获取状态和getter。

来自vuex website的示例：