开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第6天，点击查看活动详情

写在前面

上篇文章介绍了如何在vite+vue项目中引入vue-router和Element Plus，本篇文章介绍如何在vite+vue项目中引入和使用pinia

以下是官方对 Pinia 与 Vuex 的比较：

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子，结合了 Vuex 5 核心团队讨论中的许多想法。最终，我们意识到 Pinia 已经实现了我们在 Vuex 5 中想要的大部分内容，并决定实现它取而代之的是新的建议。

与 Vuex 相比，Pinia 提供了一个更简单的 API，具有更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

引入pinia

安装

通过npm安装，在终端输入命令：npm install pinia

使用

首先，在src目录下新建一个文件夹，取名为store，然后在store下面新增一个index.ts文件，index.ts代码如下：

import { webStore } from './modules/web'

const store: any = {}

export const registerStore = () => {
    store.webStore = webStore()
}

export default store

在index.ts中定义一个总的store，用于存放各种用来实现不同功能的模块下的store，这里我们先引入一个webStore，在store文件夹下新增一个modules文件夹，在modules文件夹下新增一个web.ts文件，web.ts代码如下：

import { defineStore } from 'pinia'

export const webStore = defineStore('webStore', {
    state: () => ({
        collapse: false as boolean,
    }),
    actions: {
        toggleCollapse() {
            this.collapse = !this.collapse
        },
    }
})

每一个 store 都是使用 defineStore() 方法定义的，该方法的第一个参数是一个唯一的名称，第二个参数包含state、getters、actions。

这里我在state中创建一个布尔类型的变量collapse，actions中定义一个toggleCollapse方法，用来改变collapse的值。

我们后续会用到collapse用来控制侧边栏的折叠和展开，这里先介绍store的用法。

使用前，我们需要在main.ts中引入和注册Pinia，在main.ts中添加如下代码：

import { createPinia } from 'pinia'
import { registerStore } from './store'

app.use(createPinia())
registerStore() // 注册 Pinia

然后我们在Home.vue中使用，代码如下：

<template>
  <el-button type="primary" @click="toggle">{{
    collapse ? "展开" : "折叠"
  }}</el-button>
</template>

<script setup lang="ts">
import store from "@/store";
import { computed } from "@vue/runtime-core";

const collapse = computed(() => store.webStore.collapse);

const toggle = () => {
  store.webStore.toggleCollapse();
};
</script>

<style lang="less" scoped>
</style>

通过一个按钮来改变collapse的值，按钮的文字又根据collapse的值来显示

写在最后

以上就是如何在vite+vue项目中引入和使用pinia的说明和全部代码

vite+vue项目之引入和使用pinia（类似vuex，但更轻量）

写在前面

引入pinia

安装

使用

写在最后