-
运行成功!
配置pinia[34]
没想到vuex直接被偷家了,目前由于vuex还是4.x版本,存在一些问题,比如同步异步分割的问题(老问题了) 。
![vite学习详解](http://img.gansulong.com/230619/2159214300-1.jpg)
文章插图
而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