首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >如何访问路由器文件中的Vuex存储?Vue

如何访问路由器文件中的Vuex存储?Vue
EN

Stack Overflow用户
提问于 2021-10-27 13:50:15
回答 1查看 140关注 0票数 0

我想创建一个身份验证保护路由,但我需要一个商店来获取它的isLoggedIn。我是Vuex和Vue的初学者,我的存储在main.js文件中。如果我试图从路由器访问状态,当我对它执行console.log操作时,它是undefind,并且我得到了这个错误_main__WEBPACK_IMPORTED_MODULE_4__.default is undefined。我希望有人能帮我做到这一点。

这是我的店铺:

代码语言:javascript
运行
复制
    import { createApp } from 'vue';
import { createStore } from 'vuex';
import router from './router';

import createPersistedState from 'vuex-persistedstate';
import Cookies from 'js-cookie';

import './bootstrap.min.css';
import App from './App.vue';
import API from './API';

const store = createStore({
  state: {
    posts: null,
    loading: null,
    error: null,

    user: {},
    token: null,
    userLoading: null,
    userError: null,

    registerLoading: null,
    registerError: null,

    logOutErorr: null,
  },
  plugins: [
    createPersistedState({
      key: 'BLOG_MEVN',
      paths: ['user', 'token'],
      storage: {
        getItem: key => Cookies.get(key),
        setItem: (key, value) =>
          Cookies.set(key, value, { expires: 3, secure: true }),
        removeItem: key => Cookies.remove(key),
      },
    }),
  ],

  getters: {
    isLoggedIn: state => !!state.token,
  },

  mutations: {
    SET_POSTS_LIST(state, payload) {
      state.posts = payload;
    },
    SET_POSTS_STATUS_LOADING(state, payload) {
      state.loading = payload;
    },
    SET_POSTS_LIST_STATUS_FAIL(state, payload) {
      state.error = payload;
    },

    SET_USER(state, payload) {
      state.user = payload;
      state.token = payload.token;
    },
    SET_USER_LOADING(state, payload) {
      state.userLoading = payload;
    },
    SET_USER_STATUS_FAIL(state, payload) {
      state.userError = payload;
    },

    USER_LOGOUT(state, payload) {
      state.user = payload;
      state.token = null;
    },
    USER_LOGOUT_FAIL(state, payload) {
      state.logOutErorr = payload;
    },

    USER_REGISTER(state, payload) {
      state.user = payload;
      state.token = payload.token;
    },
    USER_REGISTER_FAIL(state, payload) {
      state.registerError = payload;
    },
    USER_REGISTER_LOADING(state, payload) {
      state.registerLoading = payload;
    },
  },
  actions: {
    async getPosts({ commit }) {
      commit('SET_POSTS_STATUS_LOADING', true);
      commit('SET_POSTS_LIST', []);
      try {
        const { data } = await API.get('/api/v1/posts');
        commit('SET_POSTS_LIST', data);
        commit('SET_POSTS_STATUS_LOADING', false);
      } catch (error) {
        commit('SET_POSTS_STATUS_LOADING', false);

        commit(
          'SET_POSTS_LIST_STATUS_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },

    async login({ commit }, User) {
      commit('SET_USER_LOADING', true);
      commit('SET_USER', []);
      try {
        const config = {
          headers: {
            'Content-Type': 'application/json',
          },
        };

        const { data } = await API.post(`/api/v1/users/login`, User, config);
        commit('SET_USER', data);
        commit('SET_USER_LOADING', false);
      } catch (error) {
        commit('SET_USER_LOADING', false);

        commit(
          'SET_USER_STATUS_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },

    async register({ commit }, User) {
      commit('USER_REGISTER_LOADING', true);
      commit('USER_REGISTER', []);
      try {
        const config = {
          headers: {
            'Content-Type': 'application/json',
          },
        };

        const { data } = await API.post(`/api/v1/users/signup`, User, config);
        commit('USER_REGISTER', data);
        commit('USER_REGISTER_LOADING', false);
      } catch (error) {
        commit('USER_REGISTER_LOADING', false);

        commit(
          'USER_REGISTER_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },

    async logout({ commit }) {
      try {
        await API.get(`/api/v1/users/logout`);
        commit('USER_LOGOUT', {});
      } catch (error) {
        commit(
          'USER_LOGOUT_FAIL',
          error.response && error.response.data.message
            ? error.response.data.message
            : error.message
        );
      }
    },
  },
});

export default store;   <------- here

const app = createApp(App);

app.use(router);
app.use(store);

app.mount('#app');

路由器文件

代码语言:javascript
运行
复制
import { createRouter, createWebHistory } from 'vue-router';
import Home from '../screens/Home.vue';
import Login from '../screens/Login.vue';
import Register from '../screens/Register.vue';

import store from '../main';

console.log(store);

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    meta: {
      requiresAuth: true,
    },
  },
  {
    path: '/login',
    name: 'Login',
    component: Login,
  },
  {
    path: '/register',
    name: 'Register',
    component: Register,
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
});

// router.beforeEach((to, from, next) => {
//   if (to.matched.some(record => record.meta.requiresAuth)) {
//     if (!store.getters.isLoggedIn) {
//       next({ name: 'Login' });
//     } else {
//       next();
//     }
//   } else {
//     next();
//   }
// });

export default router;
EN

Stack Overflow用户

发布于 2021-10-27 15:06:56

Store (通常为store/index.js):

代码语言:javascript
运行
复制
import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
export default new Vuex.Store({
    state: {...}
    getters: {...}
    ...
});

路由器(通常为" Router /index.js"):

代码语言:javascript
运行
复制
import Vue from 'vue';
import VueRouter from 'vue-router';
import store from 'path/to/your/store';
Vue.use(VueRouter);
const routes = [...];
export default new VueRouter({...});
...
//Now you can use your store
store.getters['nameOfGetter'];
票数 0
EN
查看全部 1 条回答
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/69739928

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档