1. 前言
-
Vue3大势不可阻挡,与之而来的就是Vite ,尤雨溪极力推荐的前端开发与构建工具
-
vue3原生支持TS ,所以TS语法和vue3TS语法学起来
-
vue中的vuex状态管理也用不顺手,看不顺眼了,换为Pinia
2. Pinia是什么 what
- 全新一代状态管理工具(只适用于Vue项目)
- 适用于 Vue 2 和 Vue 3 ,也就是老项目也可以使用Pinia。
- 完整的
TypeScript支持
- 不需要嵌套模块，符合Vue3的Composition api ，让代码更加扁平化。
- 代码更加简洁，可以实现很好的代码自动分割
- 只有state、getters和actions.极大的简化了状态管理库的使用，也就是说删除了原来vuex的
Mutations
- 😭😭干掉自己的是另一个优秀的自己，Pinia和Vuex是一个开发团队
3. Vite 项目创建
- 创建脚手架项目
- 不需要像之前一样全局安装脚手架哦
-
Node.js 版本 >= 12.0.0。
- 下面一个指令轻松创建
npm init vite@latest
-
直接输入项目名字就行不用点击删除
-
上下键选择框架
-
Vue3对TS支持非常好，所以选择是否使用TS，这里我们选择TS，拥抱趋势
-
完整的配置
- 这里创建脚手架的速度非常，敲完回车立即就完成了创建，这就是
Vite的优势快
- 注意这个脚手架是空的没有
router，vuex之类的预设模板选择，需要什么都需要单独安装，单独配置，有需要的话在单独写个router
- 根据提示 cd到项目文件夹下
- 安装依赖 npm install
- 运行项目 npm run dev
-
效果图
- 注意我这个vite版本，运行速度也非常快
4. Pinia 安装
- 安装指令
npm install pinia
-
效果图
- 注意各个依赖的版本，因为最近这
Vue3和相关的插件都还在稳步迭代更新中
5. why 如何使用Pinia
5.1 创建 store
- src/store/index.ts
import { defineStore } from "pinia";
export const helloStore = defineStore("hello", {
state: () => ({name:'温言铁语'}),
});
- defineStore(参数1, 参数2)
- 参数1: 名字不能重复
- 参数2: 配置对象
export const helloStore = defineStore("hello", {
// state(){} 错误的写法
// 必须用箭头函数
// 必须有 返回值
// state: () => ({name:'温言铁语'}),
// 2种写法等价的
state: () => {
return {
name:'温言铁语'
};
}
});
- export具名导出 对应具名导入哦
- 所以这里没有了
根store , 也可以理解为每一个单独的store,就相当于之前的module,这就是组合式API,这就是module的替代
5.2 store作用
- 定义状态容器/state
- 修改函数/actions
- 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. 组件内使用
- 这个因为没有用
router，所以就写个组件来演示
- src/components/HelloPinia.vue
- 记住
Vue3主要是组合式API的用法
- 所以 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>
- App.vue像HelloWorld一样引用， 使用组件显示
8. 效果
-
效果演示
- 调试工具也可以调试哦
9. 后记
- 其他的明天在写吧
参考资料
Vite
Pinia
初心
我所有的文章都只是基于入门，初步的了解；是自己的知识体系梳理,如有错误,道友们一起沟通交流;
如果能帮助到有缘人,非常的荣幸,一切为了部落的崛起;
共勉
