State variables becoming undefined when calling vuex action

Question

Error Message:Error: Function DocumentReference.set() called with invalid data. Unsupported field value: undefined (found in field articleName) I am trying to add the variables from my form to my Firebase Cloud Firestore database. I use vuex for global state management. When I pass the variables from my CreateSale component to sale->state they get defined. But when I call the action createSale when submitting the form, the state variables are undefined. Everything should be setup properly. I registered Vuex aswell as configured firebase.

sale.js (vuex module)

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

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

script:

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

Your action need to be

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

The first parameter which is passed to action is context object, you need to get state and getters from this context object.

Example from vuex website: