Question

//这是我的signupform.js，其中我有一个具有表单键的对象

import Datepicker from 'vuejs-datepicker'
import store from '../../store';
export default {
  name: 'Signupform',
  components: {
    Datepicker,store
  },
  data() {
    return {
      enter_details:
        {
          username: '',
          email: '',
          contactNumber: '',
          firstName: '',
          lastName:'',
          dob: '',
          password: '',
          repeat_password: ''
        }


    }
  },
  methods:{
    addtoAPI() {

      this.$store.dispatch('addtoapi',this.enter_details)
    }
  }
};

//这是我商店的行动

import vuex from 'vuex';
import axios from 'axios'
vue.use(vuex);

const store = new vuex.Store({
  actions: {

    addtoapi: ({commit}, enter_details) => {

      let newuser = {
        username: enter_details.username,
        email: enter_details.email,
        contactNumber: enter_details.contactNumber,
        firstName: enter_details.firstName,
        lastName: enter_details.lastName,
        dob: enter_details.dob,
        password: enter_details.password,
        repeat_password: enter_details.repeat_password,
      }
      console.log(newuser);
      axios.post('https://dev-api.mysc.io/int/api/v1', newuser)
        .then((response) => {
          console.log(response);
        })
        .catch((error) => {
          console.log(error);
        })
    }
  }
});

//现在我收到一个错误，即

Signupform.js?22e4:28 Uncaught TypeError: this.$store.dispatch is not a function
    at VueComponent.addtoAPI (Signupform.js?22e4:28)
    at boundFn (vue.esm.js?efeb:190)
    at invoker (vue.esm.js?efeb:2004)
    at HTMLButtonElement.fn._withTask.fn._withTask

我还得到一个错误，当我试图在我的浏览器上看到我的商店时，它显示＆＃34;没有vuex商店＆＃34;

请帮我解决此错误，因为我有alreaady

//这是我的main.js

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'

Vue.config.productionTip = false

/* eslint-disable no-new */


export const bus = new Vue();


new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

Answer 1

In your store.js write this:

export default new Vuex.Store({
     //
});

instead of

export default({
     //
});

UPD: demo

您不需要将商店作为组件包含在内：

// signupform.js file ...
components: {
    Datepicker,
    store // <--- this is unnessesary
},

const store = new Vuex.Store({
  actions: {
    theAction() {
      alert('Action fired');
    },
  },
});

const app = new Vue({
  el: "#app",
  store,
  methods: {
    fireAction() {
      this.$store.dispatch('theAction')
    },
  },
})

<script src="https://unpkg.com/vue"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>

<div id="app">
  <button @click="fireAction">Press me</button>
</div>

尝试在vue js中使用axios向api添加用户输入但是有错误？

1 个答案: