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.jsimport store from './store/auth.module';这似乎是在导入您的一个商店模块，它不会是一个Vuex.Store实例。在main.js，你需要导入商店index.js// main.jsimport 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