vue3状态管理工具pinia的插件书写，pinia全局错误处理插件安排

相信很多大哥大姐，在actions中写请求的时候，可能会用到捕获错误 try catch

当然也有一些大哥可能会说到，我从来都没用过这个玩意，说实话一个真正考虑比较全面的项目，应该考虑出错后的问题处理，而不是一味相信程序一定会走正确的“线路”

最近在用pinia作为状态管理器，但是请求方法中 每次写一个actions 都要 一遍又一遍的写 try catch 真的的烦人，能不能搞个一劳永逸的 方式进行处理呢。

这就是需求 有个思考就需要找个方法处理了。

需要我们去写一个统一中间处理的逻辑方法，其实这个方法就是一个插件，本质也就是一个“函数”

有些初学者可能比较恐惧插件，或者希望自己啥时候能写一个插件，其实这玩意搞明白没啥子，首先不要怕，看着那些大佬一个一个插件写的那个牛掰，自己好的插件写不出来，写个简单差的也行，最主要的是中间自己收获了什么！！！！！

这个插件很简单的 这个错误处理的插件。 但是你要搞明白为什么要这么做，这个才是最主要的了！！
pinia-error-plugin.js

export default ({ options, store }) => {
  if (options.errorHandle) {
    // 用新的action覆盖旧的action
    return Object.keys(options.errorHandle).reduce((actions, action) => {
      actions[action] = (function (fn) {
        return function (...arg) {
          try {
            fn.apply(null, arg);
          } catch (error) {
            console.log(error, "error");
            // 这里根据项目你可以自定义处理些事情
          }
        };
      })(store[action]);

      return actions;
    }, {});
  }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

使用
main.js

import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
import { createPinia } from "pinia";
const pinia = createPinia();
import piniaErrorPlugin from "pinia-error-plugin"
// 使用插件
pinia.use(piniaErrorPlugin);

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

1
2
3
4
5
6
7
8
9
10
11

store.js

import { defineStore } from "pinia";


const test = function () {
  return new Promise((resolve) => {
    resolve(new Error("hello world")) // 抛出错误
    // resolve("hello world")
  });
};

export const useStore = defineStore(
  "counter",
  {
    state: () => ({ count: 0 }),
    getters: {
      double: (state) => state.count * 2,
    },
    actions: {
      async print(params) {
        console.log('参数:', params)
        const res = await test();
        console.log(res, '==')
      },
    },
    errorHandle: {
      print: true,
    }
  },
);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

觉得有用的话 就给博主点个小心心 谢谢哈
git地址 ： https://github.com/zhaoyunchong/pinia-error-plugin
npm地址： https://www.npmjs.com/package/pinia-error-plugin
pinia插件介绍文档: https://pinia.web3doc.top/core-concepts/plugins.html
其实前端最主要的就是基础吧 其他的就交给时间！！！（取自意味前端大佬的话语，这个是真大佬，是谁就不说了）

关注我持续更新前端知识