前端状态管理工具pinia：pinia是什么？相较于Vuex,pinia有什么优势,如何手动添加pinia到Vue3项目中

1.什么是pinia?

Pinia是Vue的最新状态管理工具，是Vuex的替代品。

2.相较于Vuex,pinia有什么优势?

1.提供更加简单的API(去掉了mutation)

倘若你学习过vuex，你一定会发现很多很多不合理的地方,实现一个功能可能要在state定义数据，在mutations中书写更改state数据的方法，在actions中写方法触发mutiaions中的事件，和传值可以说非常的繁琐，而在pinia中只有state,actions,getters三个，去掉了modules和mutations

2.提供符合，组合式风格的API(和 Vue3新语法统一)

3.去掉了 modules 的概念，每一个 store 都是一个独立的模块

4.配合TypeScript 更加友好，提供可靠的类型推断

3.手动添加pinia到Vue3项目中

1.使用Vite创建一个空的Vue3项目

npm create vue@latest

 

2.按照官方文档 安装 pinia到项目中。

pinia官方网：

https://pinia.vuejs.org/zh/index.html

1.下载用包管理器安装 pinia：

yarn add pinia
# 或者使用 npm
npm install pinia

2.改动main.js

import { createApp } from 'vue'
//导入pinia
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia=createApp()
 
// createApp(App).use(pinia).mount('#app')
// 当然上面的是链式的写法也可以下面分开写成：
const app=createApp(App)
app.use(pinia)
app.mount('#app');
 
//当然这里只是简单演示，一般开发过程中会将pinia专门放到一个文件中,然后导入到main.js中