Vue3+Vite+Ts搭建Store模块化

// store/modules/counter.ts
import { defineStore } from 'pinia';
 
export const useCounterStore = defineStore({
  id: 'counter',
  state: () => ({
    count: 0,
  }),
  actions: {
    increment() {
      this.count++;
    },
  },
});

// store/index.ts
import { createPinia } from 'pinia';
import { useCounterStore } from './modules/counter';
 
// 创建Pinia实例
const store = createPinia();
 
// 从store中获取counter模块的实例
const counterStore = useCounterStore(store);
 
// 示例：调用increment方法
counterStore.increment();
 
export { store };

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { store } from './store';
 
const app = createApp(App);
 
app.use(store);
 
app.mount('#app');

在这个例子中，我们定义了一个名为counter的store模块，并在store/index.ts中创建了Pinia的实例，并将counter模块的实例导出，以便在Vue应用中使用。最后，在main.ts中将创建的store实例挂载到Vue应用中。这样就实现了在Vue3+Vite+Ts项目中Store模块化的设置。