1. 前言

1. Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具
2. vue3原生支持TS ,所以TS语法和vue3TS语法学起来
3. vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia

---

2. Pinia是什么 what

1. 全新一代状态管理工具(只适用于Vue项目)
2. 适用于 Vue 2 和 Vue 3 ,也就是老项目也可以使用Pinia。
3. 完整的TypeScript支持
4. 不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
5. 代码更加简洁，可以实现很好的代码自动分割
6. 只有state、getters和actions.极大的简化了状态管理库的使用，也就是说删除了原来vuex的Mutations
7. 😭😭干掉自己的是另一个优秀的自己，Pinia和Vuex是一个开发团队

---

3. Vite 项目创建

1. 创建脚手架项目
2. 不需要像之前一样全局安装脚手架哦
3. Node.js 版本 >= 12.0.0。
4. 下面一个指令轻松创建

npm init vite@latest

5. 直接输入项目名字就行不用点击删除 创建.png
6. 上下键选择框架 框架.png

7. Vue3对TS支持非常好，所以选择是否使用TS，这里我们选择TS，拥抱趋势 TS.png

8. 完整的配置 1.png
9. 这里创建脚手架的速度非常，敲完回车立即就完成了创建，这就是Vite的优势快
10. 注意这个脚手架是空的没有router，vuex之类的预设模板选择，需要什么都需要单独安装，单独配置，有需要的话在单独写个router
11. 根据提示 cd到项目文件夹下
12. 安装依赖 npm install
13. 运行项目 npm run dev
14. 效果图 效果图.png
15. 注意我这个vite版本，运行速度也非常快

---

4. Pinia 安装

1. 安装指令

npm install pinia

2. 效果图 pinia.png

3. 注意各个依赖的版本，因为最近这Vue3和相关的插件都还在稳步迭代更新中

---

5. why 如何使用Pinia

5.1 创建 store

1. src/store/index.ts

import { defineStore } from "pinia";
export const helloStore = defineStore("hello", {
    state: () => ({name:'温言铁语'}),
});

2. defineStore(参数1, 参数2)
3. 参数1: 名字不能重复
4. 参数2: 配置对象

export const helloStore = defineStore("hello", {
    // state(){} 错误的写法 
    // 必须用箭头函数
    // 必须有 返回值 
    // state: () => ({name:'温言铁语'}),
   //  2种写法等价的
    state: () => {
        return {
            name:'温言铁语'
        };
    }
});

5. export具名导出 对应具名导入哦
6. 所以这里没有了根store , 也可以理解为每一个单独的store,就相当于之前的module,这就是组合式API,这就是module的替代

5.2 store作用

1. 定义状态容器/state
2. 修改函数/actions
3. getters/派生属性

---

6. main.ts里引入Pinia

import { createApp } from 'vue'
import App from './App.vue'

import {createPinia} from 'pinia'
// 创建pinia 实例
const pinia = createPinia()
// 挂载到Vue根实例上
createApp(App).use(pinia).mount('#app')

---

7. 组件内使用

1. 这个因为没有用router，所以就写个组件来演示
2. src/components/HelloPinia.vue
3. 记住Vue3主要是组合式API的用法
4. 所以 1引入， 2调用 const store = helloStore()

<template>
    <div>
        <h1>Pinia语法</h1>
        <hr>
        <h1>{{store.name}}</h1>
    </div>
</template>

<script setup lang="ts">
import {helloStore} from '../store/index'
const store = helloStore()
</script>

<style scoped>

</style>

5. App.vue像HelloWorld一样引用， 使用组件显示

---

8. 效果

1. 效果演示 Pinia.png
2. 调试工具也可以调试哦

---

9. 后记

1. 其他的明天在写吧

---

参考资料

Vite
Pinia

---

初心

我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;

如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;

共勉