Pinia动态注册模块

• 注册模块

@/store/base.ts

import { defineStore } from 'pinia';

export const registerUseBaseStore = (id: string) => {
  return defineStore(id, {
    state: () => {
      return {
        example: '250',
      };
    },
    actions: {
      setExample(example: string) {
        this.example = example;
      },
    },
  });
};

• 使用 @/views/example.vue

<template>
  <div>
    <p>动态模块：{{ exampleA }}</p>
    <p>动态模块：{{ exampleB }}</p>
  </div>
</template>

<script setup lang="ts">
import { registerUseBaseStore } from '@/store/base';

const baseStoreA = registerUsePBaseStore('example-a')();
const exampleA = computed(() => baseStoreA.example);

const baseStoreB = registerUsePBaseStore('example-b')();
const exampleB = computed(() => baseStoreB.example);

setTimeout(() => {
  baseStoreA.setExample('example-a');
  baseStoreB.setExample('example-b');
}, 1000);
</script>

相对使用hooks的优势，就是可以全局响应式，需要根据具体的场景而使用！