Vuex를 사용할 때 잘못된 점은 무엇입니까?가게?

Vuex를 사용할 때 잘못된 점은 무엇입니까?가게?

"Vuex Store" 기능을 활용하여 프로젝트 전체에서 "isAuthenticated" 변수를 저장 및 사용하고 이에 따라 루트에 대한 액세스를 제공하고 싶습니다.내 잘못은 무엇일까?vue store를 프로젝트에 포함시키기 위해 많은 다양한 방법을 검토했지만 아무 성과도 없었습니다.

"store"의 "index.js":

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        isAuth: false,
    },
    mutations: {
        setAuthStatus(state, status) {
            state.isAuth = status;
        },
    },
});
export default store;

"root(src)"의 "main.js":

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import vuetify from './plugins/vuetify';

Vue.config.productionTip = false;

new Vue({
    render: (h) => h(App),
    store,
    router,
    vuetify,
}).$mount('#app');

브라우저 오류:

예를 들어, 표시된 코드에 큰 구멍이 있습니다(또는 포함하지 않았습니다).일단은...isAuth는 부울(true/false)일 뿐입니다.이 기능이 작동하려면 어딘가에서 이 기능을 사용해야 합니다(즉,router.js특정 루트로의 네비게이션을 방지하기 위한 파일).

다음은 사용자 인증 및 역할의 간단한 구현입니다.당신의 예보다 조금 더 복잡한 건 인정하지만, 이해하실 수 있을 겁니다.

라우터

import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import Home from "../views/Home.vue";
import store from "../store";

const routes: Array<RouteRecordRaw> = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },
  {
    path: "/admin",
    name: "Admin",
    component: () => import("../views/Admin.vue"),
    children: [],
    meta: { role: "admin", requiresAuth: true },
  },
  {
    path: "/manager",
    name: "Manager",
    component: () => import("../views/Manager.vue"),
    children: [
      {
        path: "/employees",
        name: "Employees",
        component: () => import("../views/children/manager/Employees.vue"),
      },
    ],
    meta: { role: "manager", requiresAuth: true },
  },
  {
    path: "/employee",
    name: "Employee",
    component: () => import("../views/Employee.vue"),
    children: [],
    meta: { role: "employee", requiresAuth: true },
  },
  {
    path: "/login",
    name: "Login",
    component: () => import("../views/Login.vue"),
    meta: { requiresAuth: false },
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
    meta: { requiresAuth: false },
  },
];

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

router.beforeEach((to) => {
  if (to.meta.requiresAuth && !store.getters.isLoggedIn) {
    return { path: "login" };
  } else if (to.meta.role && to.meta.role !== store.getters.userRole) {
    return { path: store.getters.userRole };
  }
});

export default router;

여기서 중요한 두 가지 아이템이 있습니다.그meta일부 루트의 속성 및beforeEach루트가 변경될 때마다 실행되는 방식입니다.

메타 속성은 라우터에 "Hi, 이것들은 나의 조건입니다.입력하기 전에 그것들을 충족시켜야 합니다." (이러한 정보는 에서 적용되고 있습니다.)beforeEach메서드)를 참조해 주세요.

가게

import { createStore } from "vuex";
import { User } from "../types";

export default createStore({
  state: {
    user: <User>{},
  },
  getters: {
    isLoggedIn: (state): boolean => !!Object.keys(state.user).length,
    userRole: (state): string => state.user.role,
  },
  mutations: {
    SET_USER(state, user): void {
      state.user = { ...user };
    },
  },
  actions: {},
  modules: {},
});

우리는 이것을 에 내보냅니다.router.js를 사용하고 있는 파일getters를 위해beforeEach방법.

앱.

import { createApp } from "vue";
import App from "./App.vue";
import "./registerServiceWorker";
import router from "./router";
import store from "./store";

createApp(App).use(store).use(router).mount("#app");

메인 파일에는 특별한 내용이 포함되어 있지 않아야 합니다.

버전

Vuex 4.0은 Vue3와 호환되므로 Vue3를 사용하고 있는지 확인하십시오(구문에 따라서는 그렇지 않습니다).

언급URL : https://stackoverflow.com/questions/71194172/what-am-i-doing-wrong-when-using-vuex-store