首页 > 其他分享 >Pinia在请求中无法获取函数的报错

Pinia在请求中无法获取函数的报错

时间:2022-11-02 14:45:26浏览次数:71  
标签:Store 请求 ts 报错 user Pinia router import store

// 在 *.ts/js 文件中使用 pinia 报错解决方法(未删减完全)

// 文件路径

src
  store
   -index.ts
   -user.store.ts
   -user.store.ts
  router
   -index.ts

// 使用方法 @/*.ts

import { $Store } from '@/store';

console.log($Store.UserStore.token)

// @/router/index.ts

import { $Store } from "@/store/index";

router.beforeEach((to, from, next) => {
  // 制作js 使用的store 重做数据
  Object.keys(Stores.DefStore).map(item => {
    if(item != '$Store') {
      console.log(item)
      // @ts-ignore
      $Store[item] = eval(`Stores.DefStore.${item}.useStore()`)
    }
  })
  console.log(from.path, to.path);
  const superlative = ['/', '/login', '/404'];
  // #权鉴 部分页面不需要校验 token 也可进入
  if(superlative.includes(to.path)) {
    next();
  } else {
    if($Store.UserStore.token)
      next()
    else
      next('/login')
  }
});

// @/store/index.ts

import { createPinia } from "pinia";
import type { App } from "vue";
import router from '@/router'

const Store = createPinia();

export function setupPinia(app: App) {
  Store.use(({ store }) => {
    // ...这里安装插件
    store.$router = router
  }), app.use(Store);
}

// export * from './use.store.ts'
// export * from './app.store.ts'

import * as UserStore from "./user.store";
import * as SourceStore from "./source.store";
import * as ControlStore from "./control.store";
import * as EditorStore from "./editor.store";
export const DefStore = { UserStore, SourceStore, ControlStore, EditorStore };

// js 使用公共的 Store 数据
export const $Store:any = {};

export default Store;

// @/store/user.store.ts

// @ts-check
import { defineStore, acceptHMRUpdate } from "pinia";
import { Message } from "@/Utils/ajax/messages";
import { api_login } from "@/api/user.api"
import { sha256 } from 'js-sha256'
import { getToken, setToken } from '@/storage/user.storage'

// 导入 路由模块
import router from "@/router/index";
// import type { RouteParamsRaw } from "vue-router";

interface UserState {
  session: string | null;
  token: string | null;
  account: string | null;
  uId: string | null;
  uName: string | null;
  uType: string | null;
}
const token = getToken();
export const useStore = defineStore("user", {
  state: (): UserState => ({
    session: null,
    token: token,
    account: null,
    uId: null,
    uName: null,
    uType: null,
  }),

  actions: {
    logout() {
      this.$patch({
        uName: "",
        uType: "user",
      });

      // we could do other stuff like redirecting the user
    },

    /**
     * Attempt to login a user
     * @param {string} user
     * @param {string} password
     */
    login(user: any, password: any) {
      api_login(user, sha256(password)).then(res => {
        setToken(res.data);
        this.$patch({ token: res.data });
        // @ts-ignore
        router.push({ name: "Dashboard" });
        Message.suc('登录成功')
      }).catch(err => {
        console.log(err)
      });
    },
  },
});

if (import.meta.hot) {
  import.meta.hot.accept(acceptHMRUpdate(useStore, import.meta.hot));
}

标签:Store,请求,ts,报错,user,Pinia,router,import,store
From: https://www.cnblogs.com/qoon-f/p/16850919.html

相关文章