商店未定义 vue.js [英] store is not defined vue.js

问题描述

我已经创建了登录页面.路由器拦截请求并验证用户是否通过身份验证.商店正在维护用户是否登录.

I have created login page. router intercepting the request and validates the user is authenticated or not . store is maintaining the user is logged in or not.

在调试时我进入 auth.js

while debugging i am getting in auth.js

商店未定义"

我也在导入中尝试了相对路径而不是@.

I also tried relative path instead of @ in imports.

路由器代码片段

      import auth from '@/services/auth';
       ...
        router.beforeEach((to, from, next) => {
      if (to.matched.some(record => record.meta.requiresAuth)) {
        if (!auth.loggedIn()) {
          next({
            path: '/login',
          });
        } else {
          next();
        }
      } else {
        next(); 
      }
    });

auth.js 就像服务，它将与存储和维护状态交互.

auth.js is like service which will interact with store and maintain state .

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';
import store from '@/store/UserStore';

Vue.use(VueAxios, axios);

export default {
  login(credentials) {
    return new Promise((resolve, reject) => {
      Vue.axios.post('/api/authenticate', credentials).then((response) => {
        localStorage.setItem('token', response.body.token);
        store.commit('LOGIN_USER');
        resolve();
      }).catch((error) => {
        store.commit('LOGOUT_USER');
        reject(error);
      });
    });
  },
  isUserLoggedIn() {
    return store.isUserLoggedIn();
  },
};

这是我的商店

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

Vue.use(Vuex);

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',
  state: {
    isLogged: !localStorage.getItem('token'),
    user: {},
  },
  actions: {

  },
  mutations: {
    /*  eslint-disable no-param-reassign */
    LOGIN_USER(state) {
      state.isLogged = true;
    },
    /* eslint-disable no-param-reassign */
    LOGOUT_USER(state) {
      state.isLogged = false;
    },
  },
  getters: {
    isUserLoggedIn: state => state.isLogged,
  },
  modules: {

  },
});

推荐答案

在 UserStore 中更改导出类型，如下所示:

change export type in UserStore like this:

线

export default new Vuex.Store({

替换为

export const store = new Vuex.Store({

这篇关于商店未定义 vue.js的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！