无法使用Vue 2和Nuxt正确设置Axios

Question

我对vue.js相当陌生，使用vue 2和nuxt.js。我正在尝试在网站中建立身份验证。在本地运行一个后端api。 我有一个接收用户数据的表格。然后使用vuex将数据存储在商店中。我想使用axios进行POST Api调用，该调用将从存储中存储的数据检索到本地运行的API。 不幸的是，我无法让axios正常运行... 似乎sendData函数无法访问该存储。我尝试了很多事情：this。$ store.user，this.user，$ store ... 非常感谢您的帮助！

第四部分

<template>
      <form class="form-horizontal" >

<!-- firstname input-->
<div class="field">
  <label class="label" for="contact_first_name">Prénom</label>
  <div class="control">
    <input id="contact_first_name" name="contact_first_name" type="contact_first_name" placeholder="Prénom" class="input " required="" v-model="companycontact.contact_first_name">
    
  </div>
</div>

<!-- name input-->
<div class="field">
  <label class="label" for="contact_last_name">Nom</label>
  <div class="control">
    <input id="contact_last_name" name="contact_last_name" type="contact_last_name" placeholder="Nom" class="input " required="" v-model="companycontact.contact_last_name">
    
  </div>
</div>

<!-- service choice -->
<div class="field">
  <label class="label" for="Service">Service</label>
  <div class="control">
    <div class="formfield-select">
        <select id="service-choice" name="service-choice" class="input" v-model="companycontact.contact_service">
            <option v-for="(service, index) in services" :key="index" :value="service.value">
          {{ service.text }}
          </option>
        </select>
    </div>
  </div>
<div class="next-back-button">
  <nuxt-link to="/SignUpCompanyOnline" class="button is-rounded back-button" @click.native="saveStore()">Retour</nuxt-link>
  <nuxt-link to="/SignUpCompanyIg" class="button is-rounded next-button" @click.native="saveStore(); sendData()">Suivant</nuxt-link>    
</div>
</div>

</form>
</template>

<script>
export default {
    name: 'SignUpCompanyContact',
        data () {
        return {
          companycontact: {
            contact_first_name: this.contact_first_name,
            contact_last_name: this.contact_last_name,
            services: this.services,
          },
            services: [
              { text: 'Communication', value: 'COM' },
              { text: 'Direction', value: 'DIR' },
              { text: 'Marketing', value: 'MAR' },
              { text: 'Autre', value: 'OTH' },
            ],
        }
        },
        methods: {
          saveStore() {
              this.$store.commit('signUp/setContactServiceInsta', { companycontact: this.companycontact })
          },
         async sendData () {
            // console.log(this.user.email)
            // console.log(this.$store.user.email)
            // console.log(user.email)
            // console.log($store)
/*             let data = {
                  email: this.user.email,
                  password: this.password,
                  nb_employees: this.numberemployee,
                  name: this.name,
                  insta_account: this.insta_account,
                  sale_type: this.option,
                  sector_type: this.sector,
                  website_url: this.website_url,
                  contact_first_name: this.contact_first_name,
                  contact_last_name: this.contact_last_name,
                  contact_service: this.contact_service
              }
            // console.log(data);
            this.$axios.post('http://localhost:8000/api/companies/', data )
              .then(response => console.log(response))
              .catch(error => console.log(error.response)) */


         }
          }

}

</script>

<style>
  .form-example {
    padding-bottom: 20px;
  }

  .form-logo{
    width: 30px;
    height: 30px;
    border-bottom:2px solid #D8D8D8;
  }
  input {
    width: 300px;
  }
  input[placeholder] {
    width: 300px;
  }
    /* contact firstname lastname */
    input[type=contact_last_name] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid #D8D8D8;
        background-image: url(../../assets/icons/user-lightgrey.svg);
        background-size: 30px;
        background-position-y: 4px;
        background-repeat: no-repeat;
        text-indent: 20px;
    }
    
    input[type=contact_last_name]:focus {
        border-bottom: 2px solid #7F7F7F;
        outline: none;
        background-image: url(../../assets/icons/user-darkgrey.svg);
        -webkit-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
        -moz-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
        box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
        transition-duration: .3s;
        border-radius: 1px;
    }
    input[type=contact_first_name] {
        width: 100%;
        padding: 12px 20px;
        margin: 8px 0;
        box-sizing: border-box;
        border: none;
        border-bottom: 2px solid #D8D8D8;
        background-image: url(../../assets/icons/user-lightgrey.svg);
        background-size: 30px;
        background-position-y: 4px;
        background-repeat: no-repeat;
        text-indent: 20px;
    }
    
    input[type=contact_first_name]:focus {
        border-bottom: 2px solid #7F7F7F;
        outline: none;
        background-image: url(../../assets/icons/user-darkgrey.svg);
        -webkit-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
        -moz-box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
        box-shadow: 0px 14px 8px -8px rgba(0,0,0,0.40);
        transition-duration: .3s;
        border-radius: 1px;
    }
    /* service */
    #service-choice {
        padding-left: 20px !important;
        margin: 8px 0;
        box-sizing: border-box;
        color: #4A4A4A !important;
        border: 1px solid #fff !important;
        border-bottom: 2px solid #D8D8D8 !important;
        background-image: url(../../assets/icons/sector-lightgrey.svg);
        background-size: 30px;
        background-repeat: no-repeat;
        text-indent: 20px;
        outline: none !important;
    }
    #service-choice:focus {
        border-bottom: 2px solid #7F7F7F;
        outline: none;
        color: #4A4A4A !important;
        background-image: url(../../assets/icons/sector-darkgrey.svg);
        border-radius: 1px;
    }

     /* submit button */


    .submit-button {
    text-decoration: none;
    outline: none;
    background-color: #00CC99;
    border: 1px solid #00CC99;
    font-size: 20px;
    color: #fff;
    font-weight: normal;
    padding: 10px 20px;
    margin-top: 40px;
    font-family: 'Montserrat', sans-serif;
    -webkit-box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
    -moz-box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40);
    box-shadow: 0px 0px 44px -9px rgba(0,0,0,0.40); 
    }
    .submit-button:hover {
        background-color: #fff;
        border: 1px solid #00CC99;
        color: #00CC99;
        transition: background-color .3s;
    }
    /* next button / back button */
    .next-back-button {
        display: flex;
        justify-content: space-evenly;
        flex-direction: row;
        width: 50%;
    }

    .next-button {
        text-decoration: none;
        outline: none;
        background-color: #00CC99;
        border: 1px solid #00CC99;
        font-size: 20px;
        color: #fff;
        font-weight: normal;
        padding: 10px 20px;
        margin-top: 40px;
        font-family: 'Montserrat', sans-serif;
    }
    .next-button:hover {
        background-color: #fff;
        border: 1px solid #00CC99;
        color: #00CC99;
        transition: background-color .3s;
    }
    .back-button {
        text-decoration: none;
        outline: none;
        background-color: #ffffff;
        border: 1px solid #D8D8D8;
        font-size: 20px;
        color: #D8D8D8;
        font-weight: normal;
        padding: 10px 20px;
        margin-top: 40px;
        font-family: 'Montserrat', sans-serif;
        outline: none;
        
  
    }
    .back-button:hover {
        background-color: #fff;
        border: 1px solid #999999;
        color: #999999;
        transition: background-color .3s;
    }
</style>

VUEX商店：

export const state = () => ({
    user: {},
    company: {},
    companydetails: {},
    companycontact: {},
    validationcode: {},
})
  
export const mutations = {
    setEmailPassword(state, { user }) {
        console.log(user)
        state.user.email = user.email
        state.user.password = user.password
    },
    setCompanyEmployeeInsta(state, { company }) {
        console.log(company)
        state.company.name = company.name
        state.company.insta_account = company.insta_account
        state.company.selected = company.selected
    },
    setWebsiteCanalSector(state, { companydetails }) {
        console.log(companydetails)
        state.companydetails.website_url = companydetails.website_url
        state.companydetails.option = companydetails.option
        state.companydetails.sector = companydetails.sector
    },
    setContactServiceInsta(state, { companycontact }) {
        console.log(companycontact)
        state.companycontact.contact_first_name = companycontact.contact_first_name
        state.companycontact.contact_last_name = companycontact.contact_last_name
        state.companycontact.contact_service = companycontact.contact_service
    },
    setValidationCode(state, { validationcode }) {
        console.log(validationcode)
        state.validationcode.contact_first_name = validationcode.contact_first_name
    },
}