在 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其导出到 pinia 商店的 DefineStore() 中。

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 方式。但针对松果的正确方法是什么？此外，还有吸气剂和动作。应该如何导出和使用它们。

Answer 1

根据Pinia 官方文档：

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
  }
})

如果您想将吸气剂、操作和状态拆分为多个文件，可以在官方回购问题上进行讨论，其中我提供了示例，这对我有用。这是一个链接