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

初心

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

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

共勉