Skip to content

全局状态管理

TIP

Pinia 已正式成为 Vue.js 官方状态库,如果你对 Pinia 还不熟悉,除了通过 Pinia 官网学习外,我还收集了一些文字/视频的介绍,可以帮助你快速上手。

全局状态文件存放在 /src/store/modules/ 目录下,请按模块进行区分。同时请保证文件名和文件内唯一ID保持一致,建议使用 pnpm new 指令进行创建。

例如新建一个 example.ts 的文件:

ts
const useExampleStore = defineStore(
  // 唯一ID
  'example',
  {
    state: () => ({}),
    getters: {},
    actions: {},
  },
)

export default useExampleStore
const useExampleStore = defineStore(
  // 唯一ID
  'example',
  {
    state: () => ({}),
    getters: {},
    actions: {},
  },
)

export default useExampleStore

使用方法:

ts
import useExampleStore from '@/store/modules/example'
const exampleStore = useExampleStore()

exampleStore.data
exampleStore.doSomething()
import useExampleStore from '@/store/modules/example'
const exampleStore = useExampleStore()

exampleStore.data
exampleStore.doSomething()