状态管理

全局状态管理是一个大型系统不可避免的存在，因为经常有一些需要全局共享的信息需要存储，比如用户信息。

使用 Pinia ，目录更加简洁明了。同时对 TypeScript 的支持更加友好，具有无可比拟的优越性。

├── modulers
│ ├── user (具体模块，以实际项目为准)
│ │ └── index.ts (store定义)
│ │ └── types.ts (store类型)
├── index.ts （用于导出store）

添加新模块

添加 state 类型声明

// store/modulers/user/types.ts
export interface UserState {
  name: string
  avatar: string
}

定义 store，就像定义一个组件一样简单

// store/modulers/user/index.ts
import { defineStore } from 'pinia'
import { getUserInfo, LoginData, login as userLogin } from '@/api/user'
import { setToken } from '@/utils/auth'
import { UserState } from './types'

export const useUserStore = defineStore('user', {
  state: (): UserState => ({
    name: '',
    avatar: '',
  }),

  getters: {
    userInfo(state: UserState): UserState {
      return { ...state }
    },
  },

  actions: {
    // Get user's information
    async info() {
      const res = await getUserInfo()

      this.setInfo(res.data)
    },

    // Login
    async login(loginForm: LoginData) {
      const res = await userLogin(loginForm)
      setToken(res.data.token)
    },
  },
})

具体使用

import { defineComponent } from 'vue'
import { useUserStore } from '@/store'

export default defineComponent({
  setup() {
    const userStore = useUserStore()
    const login = () => {
      const userInfo = {
        username: 'admin',
        password: 'admin',
      }
      await userStore.login(values)
    }
    return {
      login,
    }
  },
})

状态管理 ​

添加新模块 ​

具体使用 ​

状态管理

添加新模块

具体使用