当前位置: 首页 > news >正文

vue3+ts+pinia+vite一次性全搞懂

vue3+ts+pinia+vite项目

    • 一:新建一个vue3+ts的项目
    • 二:安装一些依赖
    • 三:pinia介绍、安装、使用
      • 介绍pinia
      • 页面使用pinia
      • 修改pinia中的值
    • 四:typescript的使用
      • 类型初识
      • 枚举

一:新建一个vue3+ts的项目

前提是所处vue环境为vue3,如果失败就查看一下环境是否为vue2,然后删除vue2,安装vue3
这是我报过的错

vue create is a Vue CLI 3 only command and you are using Vue CLI 2.9.6.   You may want to run the fo

需要卸载+重装vue3的环境

npm uninstall -g vue-cli
npm install -g @vue/cli
vue create <项目名>

建项目的时候要选择好typescript的环境和router

二:安装一些依赖

命令自行查找;

撤销:Ctrl/Command + Z
重做:Ctrl/Command + Y
加粗:Ctrl/Command + B
斜体:Ctrl/Command + I
标题:Ctrl/Command + Shift + H
无序列表:Ctrl/Command + Shift + U
有序列表:Ctrl/Command + Shift + O
检查列表:Ctrl/Command + Shift + C
插入代码:Ctrl/Command + Shift + K
插入链接:Ctrl/Command + Shift + L
插入图片:Ctrl/Command + Shift + G
查找:Ctrl/Command + F
替换:Ctrl/Command + G

三:pinia介绍、安装、使用

介绍pinia

简单来说:
是一个vue3版本的vuex
pinia的优点
在这里插入图片描述

pinia官网地址
建好一个store文件下面的index.ts文件
这一步是官网中的描述,定义一个defineStore
在这里插入图片描述

import { defineStore } from 'pinia'export const useMain = defineStore('main', {// 相当于datastate: () => {return {counter: 0,name: 'Eduardo',}},//  相当于计算属性getters: {doubleCount: (state) => {console.log(state)return state.counter * 2}},//相当于vuex中的mutation+action,可以同时写同步和异步的代码actions: {increment(){this.counter++}}
})

页面使用pinia

引入刚在index.ts文件中导出的useMain方法

//vue文件
<script lang="ts" setup>
import { useMain } from "../store/index";
// 引入storeToRefs才能结构有响应式。响应式可以直接修改数据
import { storeToRefs } from "pinia";

当我们不适用storeToRefs时useMain不是响应式的,也就意味着数据改变 无法马上见效,所以官方提供的这个方法
解构出三个变量

const { counter, name, doubleCount } = storeToRefs(main);

修改pinia中的值

最容易的一种是直接.值=''进行修改;(不推荐)
使用$patch进行修改

main.$patch((state) => {state.counter += 10;state.name = "大脑壳---";
});

这里是整个store,里面的方法和参数,可以看到我们定义的name和increment方法还有$reset重置方法;
在这里插入图片描述
可以看到通过$patch修改了这个值,刚开始定义的值是counter:0,name:'Eduardo'
在这里插入图片描述
如果想直接取出值,可以使用.value
在这里插入图片描述
完整页面:
在这里插入图片描述

<template><div class="home"><img alt="Vue logo" src="../assets/logo.png" /><HelloWorld msg="Welcome to Your Vue.js + TypeScript App" /></div>
</template><script lang="ts" setup>
import HelloWorld from "@/components/HelloWorld.vue"; // @ is an alias to /src
import { useMain } from "../store/index";
// 引入storeToRefs才能结构有响应式。响应式可以直接修改数据
import { storeToRefs } from "pinia";
const main = useMain();
const { counter, name, doubleCount } = storeToRefs(main);
main.increment(); //调用pinia里面的增加方法main.$patch((state) => {state.counter += 10;state.name = "大脑壳---";
});
console.log(name.value);
</script>

四:typescript的使用

类型初识

let arr : Array<number> = [1,2,3]
function greet(name: string) {console.log("hello" + name.toLocaleLowerCase() + "!!!");
}
type Id = Array<number> | string; //定义类型的方式一
//定义类型的方式二
interface Point {x: number;y: string;
}
function PointId(pt: Point) {console.log(pt);
}
PointId({x: 122,y: "你好",
});//通过接口定义拓展
interface Animal {name: string;
}
interface Bear extends Animal {hobby: string;count: number;
}
const bear: Bear = {name: "big大熊猫",hobby: "爱好是什么",count: 888,
};
console.log(bear);

枚举

使用关键字enum

// 枚举的对象会根据第一个的初始值进行依次递增
enum derective {up = 1,down,left,right,
}
http://www.lryc.cn/news/62840.html

相关文章:

  • Apache安装与基本配置
  • 哈夫曼树【北邮机试】
  • thinkphp:数值(保留小数点后N位,四舍五入,左侧补零,格式化货币,取整,生成随机数,数字与字母进行转换)
  • 用Flutter你得了解的七个问题
  • Nmap使用手册
  • 基于ResNet-attention的负荷预测
  • 华为校招机试 - 批量初始化次数(20230426)
  • WhatsApp CRM:通过 CRM WhatsApp 集成向客户发送消息
  • SOLIDWORKS Electrical无缝集成电气和机械设计
  • Numpy从入门到精通——数组变形|合并数组
  • DJ4-5 路由算法:LS 和 DV
  • python图像处理之形态学梯度、礼帽、黑帽
  • 千万级直播系统后端架构设计
  • ImageJ 用户手册——第五部分(菜单命令File,Edit)
  • nmap常用命令
  • 常用adb 命令
  • 后端开发常犯的问题(Java版)
  • Vue CLI 部署
  • 客快物流大数据项目(一百一十七):网关 Spring Cloud Gateway
  • fMRI时间序列振幅和相位对功能连接分析的影响
  • 备战2个月,四轮面试拿下字节offer...
  • 关于Nginx
  • tensorflow中的共享变量
  • flink cep数据源keyby union后 keybe失效
  • python中的继承与多态,dir()函数
  • C++练级之初级:第五篇
  • JMeter的使用(二)
  • C/C++文件操作/IO流
  • 推荐 7 个超牛的 Spring Cloud 实战项目
  • Linux信号:信号 信号集 信号集函数