Question

由于 POST 方法，我编写了将数据发送到 API 的文件，但是当我运行我的程序时，我在控制台中收到以下错误：TypeError: this. $ 商店未定义。

输入：用户必须在 HCI（页面“page2.vue”）上输入值，当他点击按钮“Enregistrer en online”（预期输出）时，必须将值发送到 API！

我完全不知道如何解决这个错误（this.$ Store 未定义）。

我使用 Vue.JS 和 Axios。

提到的错误：

store-enregistrement.js：


const state = {

}

const mutations = {

}

const actions = {
 enregistrerConfig ({ commit }, payload) { //Création d'une action
   api.post('/rpi/110', payload) // Envoi d'une requête  POST 
     .then(function (response) { //En cas de succès, affiche la réponse de l'API
       console.log('CREATION OK', response)
     })
     .catch(function (error) { //En cas d'échec affiche la réponse de l'API, 
                              //stockée dans l'erreur JavaScript.
       console.log(error.response) //--->pour accéder à la réponse d'une 
                                 //erreur : error.response
     })
 }
}

const getters = {

}

export default {
 namespaced: true,
 state,
 mutations,
 actions,
 getters
}

pages/page2.vue：

<template>
<q-page>

<center>
   <div class="row">
   <div class="col">
   <div class="q-pa-md">
   <div class="q-gutter-md" style="max-width: 300px">
   <q-input outlined v-model="form.heure_jour_start" label="De" />
   </div>
   </div>
   </div>

   <div class="col">
   <div class="q-pa-md">
   <div class="q-gutter-md" style="max-width: 300px">
   <q-input outlined v-model="form.heure_jour_end" label="A" />
   </div>
   </div>
   </div>
   </div>
   </center>

<q-btn color="green" label="Enregistrer en online" @click="submitForm"/>
</q-page>
</template>

<script>
import { mapActions } from 'vuex' // Importation de mapActions
export default {

name: 'page2',
data () {  
   return {
   left: false,
   right: false,
   text3 : '',
    form: {
    heure_jour_start: '',
    heure_jour_end: '',
    
          }
          }
        },
 
 methods: {
   ...mapActions('auth', ['enregistrerConfig']), //Mappage de l'action 
   submitForm () {
     this.enregistrerConfig(this.form) //Appel de l'action
   }}
</script>

boot/axios.js：

import Vue from 'vue'
import axios from 'axios'

const api = axios.create({
  baseURL: 'http://172.31.6.112/api',
  timeout: 3000,
  headers: {
    Accept: 'application/json',
    'Content-Type': 'application/json'
  }
})

Vue.prototype.$api = api

export { api }

store/module-example/index.js：

import Vue from 'vue'
import Vuex from 'vuex'

import auth from './store-enregistrement'
import store from './store'

new Vue({
  store,
 })

Vue.use(Vuex)

/*
 * If not building with SSR mode, you can
 * directly export the Store instantiation;
 *
 * The function below can be async too; either use
 * async/await or return a Promise which resolves
 * with the Store instance.
 */

export default function (/* { ssrContext } */) {
  const Store = new Vuex.Store({
    modules: {
      auth
    },

    // enable strict mode (adds overhead!)
    // for dev mode only
    strict: process.env.DEV
  })

  return Store
}

我在代码和框中的代码：

https://codesandbox.io/s/exciting-rgb-4bp3c?file=/src/boot/axios.js

对 API 的 POST 请求出现错误“this.$store is undefined”

0 个答案: