Vue：TypeError：提交登录表单时无法读取未定义的属性'dispatch'

Question

TypeError: Cannot read property 'dispatch' of undefined尝试提交 Login.vue 表单时出现错误。我将我的更改function()为只是data()等，就像建议的 SO 答案一样，但这并没有帮助......index.js：import Vue from 'vue';import Vuex from 'vuex';import auth from './store/auth.module.js';Vue.use(Vuex);export default new Vuex.Store({    //plugins: [createPersistedState({ storage: sessionStorage })],    state: {  },    mutations: {  },    actions: {  },    modules: { auth }})主.js：import Vue from 'vue'import App from './App.vue'import router from './router';import store from './store/auth.module';import "./assets/css/tailwind.css";import '@/assets/css/tailwind.css';Vue.config.productionTip = false;new Vue({  router,   store,  render: h => h(App),}).$mount('#app');auth-header.js：export default function authHeader() {    let user = JSON.parse(localStorage.getItem('user'));    if (user && user.accessToken) {        return { Authorization: 'Bearer ' + user.accessToken };    } else {        return {};    }}user.service.js：import axios from 'axios';import authHeader from './auth-header';const API_URL = 'localhost:8088/testproject/api/users';class UserService {    getPublicContent() {        return axios.get(API_URL + '/all');    }    getUserBoard() {        return axios.get(API_URL + '?role=user', { headers: authHeader() });    }    getModeratorBoard() {        return axios.get(API_URL + '?role=mod', { headers: authHeader() });    }    getAdminBoard() {        return axios.get(API_URL + '?role=admin', { headers: authHeader() });    }}export default new UserService();

Answer 1

猜测一下，我会说问题出在main.js

// main.js

import store from './store/auth.module';

这似乎是在导入您的一个商店模块，它不会是一个Vuex.Store实例。

在main.js，你需要导入商店index.js

// main.js

import store from './index.js'

通过不导入store/index.js，您也错过了所有重要的

Vue.use(Vuex)

Answer 2

你能检查一下你是否正确地导入了 Vuex 吗？

我觉得 phil 的回答是正确的，但这里还有一些可能有助于解决问题的额外阅读：cannot read property 'dispatch' of undefined in Vuex

Answer 3

请检查您的文件夹结构是否如下所示。

存储文件夹->（包含）auth.module，index.js（您提到的第一个代码片段）。

现在将商店导入到main.js如下所示。

import store from './store'

现在你剩下的代码应该可以工作了。

Answer 4

将此行添加到您的main.js文件中：

import store from '../yourPath';

vue.$store = store

这将全局设置存储对象。所以你可以通过使用从任何组件访问它this