-
运行成功！
配置pinia[34]
没想到vuex直接被偷家了，目前由于vuex还是4.x版本，存在一些问题，比如同步异步分割的问题（老问题了） 。
文章插图
而pinia完全就是按照vuex5的预案来实现的，所以说是vuex5也不为过，目前这个包是官方接手并且推荐的 。
总结下就是pinia轻快好省 。话不多说，感兴趣的可以去看下官方的描述 。
Pinia?/.html正在上传…重新上传取消
我们直接来安装
npm install pinia --savemkdir src/storeecho > src/store/index.tsecho > src/store/user.ts话不多说，先引入pinia并且给下 。
import { createPinia } from 'pinia'import type { Pinia } from 'pinia'const pinia: Pinia = createPinia();export default pinia然后main.ts引入
import { createApp } from "vue";import router from "./router/index";import pinia from "./store/index";import "./index.css";import App from "./App.vue";createApp(App).use(router).use(pinia).mount("#app");ok，这就配置完啦~
接着我们来存储一些数据，进入src/store/user.ts
import { reactive, computed } from 'vue';import { defineStore } from "pinia";import type { ComputedRef } from 'vue';// 相当于以前的`module`const useUserStore = defineStore("user", () => {// 会被判定为`state`const user = reactive({name: '鲲哥',age: 24,gender: 'man', // 一个真正的man~(神经错乱)description: '全民制作人，大家好，我是cxk~',})// 会被转换为`action`function growUp (): void {user.age += 1console.log(user)}// 会被替换为gettersconst age: ComputedRef = computed(() => user.age);return {user,age,growUp}});export default useUserStore当然如果你不习惯写的话也是可以的，传入一个，字段为state, , [35]
然后让我们去到A.vue方法中，将这个user引入
点击立长一岁~~当前岁数：{{ age }}.a {color: red;}注意如果你用的是对象解构并且这个数据是一个非引用的数据，你就需要用进行包裹，因为解构导致它失去了响应式，相当于const a = 1这样 。
ok，我们直接终端运行npm run dev
store
这样就完成啦~
配置别名[36]
我们接着准备接入[37]，不过在这之前，我们要配置下别名，不为什么，只是为了少写几个字而已~
话不多说，直接去到vite..ts文件中 。vite别名配置是基于的插件@/-alias[38]，所以写法一致 。
import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'// import './server.js'export default defineConfig({resolve: {alias: {'@/': 'src/','@views/': 'src/views/','@router/': 'src/router/','@store/': 'src/store/',}},plugins: [vue()],server: {port: 7777,},})但是到这里还没有结束，我们还需要告知ts这个@字符代表什么意思 。
{"compilerOptions": {// ..."baseUrl": ".","paths": {"@/*": ["src/*"],"@views/*": ["src/views/*"],"@store/*": ["src/store/*"],"@router/*": ["src/router/*"],}},}这样就正常啦~，可以安心的将你的绝对路径改成@/xxx了 。
配置[39]
这是一个从vite中抽出去的一个包，我之前也写过一篇文章学习的，感兴趣的大佬可以去看下 。
坏蛋Dan：学习1 赞同 · 0 评论文章正在上传…重新上传取消
话不多说，我们直接配置 。这里就不用测试了，感兴趣的大佬可以看下我上面提到的这个文章 。另外下面用到的一些东西我就不解释了，这文章里都有说的 。
npm install vitest -Dmkdir __tests__echo > __tests__/testComponentA.spec.ts
- vite 学习
- package.json文件变更
- 1.常见的构建工具
- 详解：古代的盗墓贼是如何盗墓的？
- 问题一: 机器学习的基本流程
- 深度学习中偏差和方差的区别
- 「算法学习」：贪心算法找零问题
- 九 OpenCV学习笔记——图像轮廓(下)
- [人工智能-深度学习-74]：环境
- 【Spire