在PINIA，Vue3+Typescript上处理命名空间模块化方法

Question

正常情况下我用的是同名的vuex。但我决定退出vuex，因为Pinia拥有vue核心团队支持。我认为这对未来的发展更好。现在，我正在用模块化的方法创建商店，但无法真正理解如何在类型记录项目中处理这个部分。

假设我有一个user接口。

interface User {
  email: string,
  username: string,
}

export default User;

在store/modules/state.ts中，我调用类型并创建用户状态。

import User from "../../types/User"

export const state = () => {
  return {
    user: {} as User | null,
  };
}

在store/modules/index.ts中，我应该导入状态。然后将namespace: true导出为defineStore()，用于pinia商店。

import {state} from "./state"

export default {
  namespace: true,
  state,
}

在store/index.ts中

import {defineStore} from "pinia"
import {data} from "./modules"

export const Store = defineStore(data)

好的，上面，名称空间部分我使用vuex的方式。但是什么是正确的方法。此外，getter和操作也是如此。如何出口和使用。

Answer 1

根据官方的Pinia docs

Vuex有一个具有多个模块的单一存储的概念。这些模块可以选择命名空间，甚至可以相互嵌套。将这个概念与Pinia一起使用的最简单的方法是，以前使用的每个模块现在都是一个商店。

所以现在你应该把每个vuex模块想象成一个分离的pinia商店。看看你的例子，它可能是这样的。在store/modules/index.ts中创建文件并粘贴：

import { defineStore } from "pinia";
import state from "store/modules/state.ts"; // Assuming that it's path to user state

export const useUserStore = defineStore('some/vuex/module/name', {
  state: state,
  getters: {
    // your getters here, check the Offical Pinia above
  },
  actions: {
    // your actions and mutations here, also check the offical Pinia Docs
  }
})

如果您想要将getter、action和state拆分到多个文件中，那么就有关于正式回购问题的讨论，我在这里提供了示例，这对我是有用的。这是一个link