我报名参加金石计划1期挑战——瓜分10万奖池，这是我的第3篇文章

前言

Pinia是尤雨溪强烈推荐的一款Vue状态管理工具，也被认为是下一代Vuex的替代产品。

🍏推荐阅读

• 依赖版本升级 篇 (十二)

Vue新一代状态管理工具(Pinia)

Pinia

Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

与 Vuex 3.x/4.x 的比较

• mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。

• 无需创建自定义复杂包装器来支持 TypeScript，所有内容都是类型化的，并且 API 的设计方式尽可能利用 TS 类型推断。

• 不再需要注入、导入函数、调用函数、享受自动完成功能！

• 无需动态添加 Store，默认情况下它们都是动态的，您甚至都不会注意到。请注意，您仍然可以随时手动使用 Store 进行注册，但因为它是自动的，您无需担心。

• 不再有 modules 的嵌套结构。您仍然可以通过在另一个 Store 中导入和 使用 来隐式嵌套 Store，但 Pinia 通过设计提供平面结构，同时仍然支持 Store 之间的交叉组合方式。 您甚至可以拥有 Store 的循环依赖关系。

• 没有 命名空间模块。鉴于 Store 的扁平架构，“命名空间” Store 是其定义方式所固有的，您可以说所有 Store 都是命名空间的。

• Vuex： State、Gettes、Mutations(同步)、Actions(异步)

• Pinia： State、Gettes、Actions(同步异步都支持)

安装

# PNPM
pnpm install pinia -S

unplugin.ts

自动导入vue和pinia相关函数

import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import Icons from 'unplugin-icons/vite'
import IconsResolver from 'unplugin-icons/resolver'
import { FileSystemIconLoader } from 'unplugin-icons/loaders'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'

export function configAutoImportPlugin() {
  return AutoImport({
    imports: ['vue', 'pinia'],
    resolvers: [ElementPlusResolver({ importStyle: false })],
    // 指定文件生成路径
    dts: 'config/unplugin/auto-imports.d.ts',
    eslintrc: {
      enabled: true, // Default `false`
      filepath: './.eslintrc-auto-import.json', // Default `./.eslintrc-auto-import.json`
      globalsPropValue: true, // Default `true`, (true | false | 'readonly' | 'readable' | 'writable' | 'writeable')
    },
  })
}

export function configVueComponentsPlugin() {
  return Components({
    // 用于搜索组件的目录的相对路径。
    dirs: ['src/components'],
    resolvers: [
      ElementPlusResolver(),
      IconsResolver({ prefix: 'icon', customCollections: ['custom'] }),
    ],
    // 指定文件生成路径
    dts: 'config/unplugin/components.d.ts',
    // 组件的有效文件扩展名。
    extensions: ['vue'],
    // 允许子目录作为组件的命名空间前缀。
    directoryAsNamespace: false,
    deep: true,
  })
}

export function configVueIconsPlugin() {
  return Icons({
    compiler: 'vue3',
    customCollections: {
      // 这里是存放svg图标的文件地址，custom是自定义图标库的名称
      custom: FileSystemIconLoader('./src/assets/icons'),
    },
    autoInstall: true,
  })
}

创建

在src目录下新建store目录并在其下面创建index.ts文件，代码如下：

import type { App } from 'vue'
import { createPinia } from 'pinia'

const store = createPinia()

export function setupStore(app: App<Element>) {
  app.use(store)
}

export default store

创建store

在src/store/modules文件夹下创建一个user.ts文件，命名按照需求即可代码如下：

import { resetRouter } from '@/router'
export const useUserStore = defineStore('user', {
  state: () => ({
    // user info
    userInfo: null,
    // token
    token: null,
  }),
  getters: {
    getToken: (state): string => state.token,
  },
  actions: {
    /**
     * @description 登录
     * @param {*} userInfo
     */
    async login(userInfo: any) {
    },
    /**
     * @description 设置token
     * @param {*} token
     */
    setToken(token: string) {
      this.token = token
    },
    /**
     * @description 重置token、roles、permission、router等
     */
    async resetAll() {
      this.setToken('')
      await resetRouter()
    },
  },
})

挂载

在main.ts中引入store并挂载，代码如下：

import 'vue-global-api'
import App from './App.vue'
import { createApp } from 'vue'
import { bootstrap } from '~/library'
import { setupStore } from '@/store'
const app = createApp(App)
bootstrap(app)
setupStore(app)
app.mount('#app')

代码已经提交到Gitee

继续学习

废话只说一句：码字不易求个👍，收藏 === 学会,快行动起来吧！🙇‍🙇‍🙇‍。

# Vite+Vue3+TypeScript+Element (十四) 搭建企业级轻量框架实践