IT数码 购物 网址 头条 软件 日历 阅读 图书馆
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
图片批量下载器
↓批量下载图片,美女图库↓
图片自动播放器
↓图片自动播放器↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁
 
   -> JavaScript知识库 -> 实践一个Vue 3 + TypeScript + Vite + Pinia项目 -> 正文阅读

[JavaScript知识库]实践一个Vue 3 + TypeScript + Vite + Pinia项目

新建一个项目

# 执行新建命令,选择vue vue-ts
yarn create vite vite-pinia-tsx
# 添加 sass 支持
yarn add sass -D
# 支持jsx tsx
yarn add @vitejs/plugin-vue-jsx -D

支持jsx、tsx

新建一个 UserComponent.jsx 文件
UserComponent.jsx

import { defineComponent } from "vue"

export default defineComponent({
  // 接收属性
  props: {
    name: String
  },
  setup(prop) {
    const {name} = prop
    return () => <p>user:{name}</p>
  }
})

在 app.vue 引入user.tsx
app.vue

<script setup lang="ts">
import UserComponent from './UserComponent'
</script>
<template>
    <!-- 添加模块 -->
    <UserComponent name="小华" />
</template>

直接引入 css scss

import './assets/css/styleDefault.css'
import './assets/css/style.scss'

直接引入json

新建 user.json 文件,并添加数据
user.json

{
  "id": 1,
  "name": "小洁", 
  "age": 18
}

在 app.vue 中引入文件并展示
app.vue

<script setup lang="ts">
import user, { age } from './user.json'
</script>
<template>
    <p>
        读取JSON的user数据是:ID:{{ user.id }},姓名:{{ user.name }},年龄:{{
        age
        }}
    </p>
</template>

使用Pinia对数据进行状态管理

优势:dev-tools支持、热模块更换、支持typeScript、插件机制、支持服务端渲染等等

# 安装pinia
yarn add pinia

实现一个简单的增删功能
在 main.ts 引入pinia

// 引入pinia
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from "pinia"

const app = createApp(App)
app.use(createPinia()).mount('#app')

新建文件夹 store,打开新建 index.ts。创建 useUserStore
store/index.ts

import { defineStore } from "pinia";

interface State {
  userList: User[]
}
// 定义一个 useUserStore 的数据管理
export const useUserStore = defineStore('user', {
  state: () => ({
      userList: [
        {
          id: 1,
          name: '小明'
        },
        {
          id: 2,
          name: '小芳'
        },
      ]
    }),
    actions: {
      deleteOne(id: number) {
        this.userList = this.userList.filter(item => item.id != id);
      },
      addUser(item:User) {
        this.userList.push(item)
      }
    }
})

app.vue

<script setup lang="ts">
// 适用pinia对数据进行状态管理
import { useUserStore } from './store'
import UserList from './components/UserList'
import { ref } from 'vue'
const userStore = useUserStore() // 这里不能解构赋值,会失去响应式
const newValue = ref('')
const addOne = () => {
  userStore.addUser({
    id: new Date().getMilliseconds(),
    name: newValue.value,
  })
  newValue.value = ''
}
</script>
<template>
  <!-- 适用pinia对数据进行状态管理 -->
  <input type="text" v-model="newValue" @keyup.enter="addOne" />
  <ul>
    <li v-for="user in userStore.userList" :key="user.id">
      <UserList :user="user" />
    </li>
  </ul>
</template>

components/UserList.tsx

import { defineComponent, PropType } from "vue"
import { useUserStore } from "../store";

export default defineComponent({
  props: {
    user: {
      type: Object as PropType<User>,
      required: true,
    },
  },
  setup(prop) {
    const { user } = prop
    const { deleteOne } = useUserStore()
    const deleteUser = () => deleteOne(user.id)
    return () => <p>{user.name}<button onClick={deleteUser}>删除</button></p>
  }
})

git地址:
https://github.com/JackWsjls/vite-pinia-tsx

  JavaScript知识库 最新文章
ES6的相关知识点
react 函数式组件 & react其他一些总结
Vue基础超详细
前端JS也可以连点成线(Vue中运用 AntVG6)
Vue事件处理的基本使用
Vue后台项目的记录 (一)
前后端分离vue跨域,devServer配置proxy代理
TypeScript
初识vuex
vue项目安装包指令收集
上一篇文章      下一篇文章      查看所有文章
加:2022-09-04 01:02:48  更:2022-09-04 01:05:02 
 
开发: C++知识库 Java知识库 JavaScript Python PHP知识库 人工智能 区块链 大数据 移动开发 嵌入式 开发工具 数据结构与算法 开发测试 游戏开发 网络协议 系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑 笔记本 显卡 显示器 固态硬盘 硬盘 耳机 手机 iphone vivo oppo 小米 华为 单反 装机 图拉丁

360图书馆 购物 三丰科技 阅读网 日历 万年历 2024年11日历 -2024/11/23 10:22:14-

图片自动播放器
↓图片自动播放器↓
TxT小说阅读器
↓语音阅读,小说下载,古典文学↓
一键清除垃圾
↓轻轻一点,清除系统垃圾↓
图片批量下载器
↓批量下载图片,美女图库↓
  网站联系: qq:121756557 email:121756557@qq.com  IT数码