【问题标题】:State variables becoming undefined when calling vuex action调用 vuex 操作时状态变量变得未定义
【发布时间】:2018-11-23 13:17:29
【问题描述】:

错误信息:Error: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field articleName) 我正在尝试将表单中的变量添加到我的 Firebase Cloud Firestore 数据库中。我使用 vuex 进行全局状态管理。当我将 CreateSale 组件中的变量传递给 sale->state 时,它​​们会被定义。但是当我在提交表单时调用操作 createSale 时,状态变量是未定义的。一切都应该正确设置。我注册了 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'
  })
}

【问题讨论】:

    标签: firebase vue.js google-cloud-firestore vuex


    【解决方案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的第一个参数是上下文对象,你需要从这个上下文对象中获取状态和getter。

    来自vuex website 的示例:

    【讨论】:

      猜你喜欢
      • 2018-05-16
      • 1970-01-01
      • 2019-12-11
      • 2020-08-14
      • 2019-08-25
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2018-05-13
      相关资源
      最近更新 更多