TypeScript（4）——Vue全家桶+ TypeScript + Vuex + LocalStorage 完成的本地便签案例

最新推荐文章于 2024-07-05 21:11:27 发布
最新推荐文章于 2024-07-05 21:11:27 发布
阅读量1.2k 收藏 4
点赞数 1
分类专栏： TypeScript 文章标签： vue typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43216105/article/details/106197461
版权

前言

之前已经学过TS学习笔记3——如何在vue项目中使用TypeScript语法；
这篇完成VueCil4 + TypeScript + Vuex + LocalStorage 完成的本地便签案例；

需求：本地便签的增删改查，便签分类查看；

这个案例主要使用的是Class类，着重于面向对象开发而非面向过程，所以也复用了TS学习笔记2中的便签案例部分代码，大家看我的博客和我一起学习ts的时候，还是建议从TS学习笔记1开始，每一篇都看一下；

正文

项目源码

开始

样式----使用bootstrap框架

我用的最简单的方法，使用cdn在index.html直接引入

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
  <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

分析需求

需求：本地便签的增删改查，便签分类；

  1. 进页面时候，获取localStorage中存储的全部便签,把数据存到vuex中方便全局使用；
  2. 便签根据类型不同可以的分类查看；
  3. 新增便签，页面新增及更改本地存储；
  4. 删除便签，页面删除及本地存储；
  5. 编辑便签，页面删除及本地存储；

页面分析——/scr/components

  • 头部导航文件–MenuBar.vue
  • 便签主体—ItemList.vue
  • 编辑弹框–StickyEditor.vue
  • 单个便签框–StickyItem.vue
  • 整体的页面–/src/page/stickyNotePage.vue

数据分析——/scr/model

  • 生成单个便签所需的类–ItemData.ts
  • 枚举类别数据文件–CateEnum.ts

过程分析——/scr/store

  • 操作LocalStorage的单个类–DataHelper.ts
  • 操作页面增删改查的类–ActionHelper.ts

项目分析

  • 路由：/scr/router/index.ts
  • VUEX：/scr/store/index.ts
  • 入口：/scr/App.vue
  • 全局入口ts：/scr/main.ts

操作代码（激动的搓搓手）

  • 本身博客是准备一个一个页面去写的，但是代码好多啊。所以直接附上github地址：可以下载参考，源码中包含学习笔记和之前的代码合集及vue/cil3的配置与插件的使用；
  • 这个案例是有视频链接的，代码很简单，主要是思路，如果代码看不懂的可以去看着视频练习~

结语

通过几篇ts学习笔记的学习，在vue和html中使用TS应该已经很熟练了，还是那句话：我认为的TypeScript其实就是给JavaScript加了一些规范，ts是只js的超集，学好ts的根本还是熟练运用js！

附：TS学习笔记合集：

over~有其他问题留言
如果本文对你有帮助的话，请不要忘记给我点赞打call哦~o(￣▽￣)ｄo

jcat_李小黑
关注
专栏目录
TypeScript中用单例模式封装 localStorage
name_lsc的博客
01-13 414
class LocalStorageUtil { private constructor() {} // 单例模式中，给构造函数添加 private 修饰符是必要的 public static storageInstance: LocalStorageUtil; public static createInstance() { if (!this.storageInstance) { this.storageInstance = new LocalStorageUtil() }
Vue.js + Vuex + TypeScript 实战项目开发与项目优化
前端高薪进击手记
03-02 526
引入 Element 时，可以传入一个全局配置对象。该对象目前支持 size 与 zIndex 字段。size 用于改变组件的默认尺寸，zIndex 设置弹框的初始 z-index（默认值：2000）。，我们可以只引入需要的组件，以达到减小项目体积的目的。完整组件列表和引入方式（完整组件列表以。需要注意的是，样式文件需要单独引入。
使用Typescript编写更加易用的localStorage和sessionStorage的API
08-10
使用Typescript编写更加易用的localStorage和sessionStorage的API
localStorage 便签功能实现
weixin_34297704的博客
04-22 227
之前利用localStorage写过手机便签应用，因为蛋疼的换了台三星的屌丝级手机，木有了测试的工具，没能继续优化维护下去。而在网页上实现便签功能目前来说似乎没有太大的意义，因为不论是Firefox还是Chrome都还没能实现localStorage 数据的同步。贴出代码，仅供参考，希望对感兴趣的同学能有所启发！ var Storage ={ saveData:func...
Typescript window.localStorage 存储 Obj && Value区别
最新发布
MyFreeIT
07-05 370
不能获得UserC，所有保存的时候需要存储value，而不是对象。
localStorage实现便签小程序
Picking_up_stones的博客
11-20 1936
前言：今天写了个小练习，把这几天看的东西巩固一下，在这个程序中用到了localStorage存储和json串的转换。下面是具体的实现代码： （1）首先判断是否存在用户，从而显示相应的界面function isUser() { var storage = window.localStorage; if (storage.user != undefined) {
Vue项目使用localStorage+Vuex保存用户登录信息
01-19
本文实例为大家分享了Vue使用localStorage+Vuex保存用户登录信息的具体代码，供大家参考，具体内容如下 api.js import axios from 'axios' const baseURL = 'http://XXX // 全局的 axios 默认值 axios.defaults....
Vue3.0+typescript+Vite+Pinia+Element-plus搭建vue3框架！
qq_33546296的博客
06-03 973
/ 此处的id很重要name: ''}),getters: {},},actions: {},// 登录// 调用接口，做逻辑处理})setup() {// $patch 修改 store 中的数据name: '名称被修改了,nameLength也改变了'})return {userStore,updateName},})
一步步打造最新前端框架组合 —— vite+vue3+pinia+vue-router@4+setup+ts
shuux666的博客
02-21 1654
本文将会结合自己搭建经验一步一步展开，记录最新vue前端框架如何搭建。 1、安装vite 全局安装 npm init vite@latest 2、使用vite创建vue3工程 npm init @vitejs/app 第一步：工程文件名 第二步：选择框架 第三步：选择vue-ts组合 第四步：进入项目文件夹，安装依赖即可 3、配置eslint、prettier、编辑器 首先安装相关依赖，如下： npm i prettier eslint eslint-config-prettier eslint-
Vite 3.x + Vue 3.x + TypeScript 4.x + Element Plus + Pinia 搭建项目
lhz_333的博客
08-17 1608
学习如逆水行舟，不进则退。
vue3.0+typescript集成jquery、bootstrap、jquery.dataTable插件、echart
10-31
vue3.0+typescript通过npm管理包，然后导入ts中进行集成jquery、bootstrap、jquery.dataTable插件、echart，具体界面请看：https://blog.csdn.net/sunxiaoju/article/details/109401288
Vue3+TypeScript+Bootstrap封装自己的表单组件
qq_59181609的博客
04-16 1671
自定义 input 组件值支持：自定义表单类型（type），双向数据绑定，表单验证功能。 一；创建名为ValidateInput 的组件，在其中编写自己想要实现的自定义组件功能，之后使用ValidateInput 组件标签当作 input 标签使用。 1.使用 v-bind="$attrs"和 inheritAttrs: false向指定组件中的标签结点添加非 Prop 的 Attribute 属性 // ValidateInput 组件标签内容 <template> <d..
Vue3+TypeScript+Bootstrap 封装自己的下拉框组件
qq_59181609的博客
04-22 614
难点：点击下拉框以外的地方关闭下拉框 思路总结： 1.获取下拉框的DOM元素。 2.写一个回调函数，获取当前点击的DOM元素。 3.通过 contains 方法，判断当前点击的DOM元素是否在下拉框DOM元素内来决定是否显示和隐藏下拉框。 <template> <div class="dropdown" ref="dropdownRef"> <a class="btn btn-outline-light my-2 dropdown-toggl
TypeScript中LocalStorage存储和读取Array类型
热门推荐
lqy455949477的博客
04-12 1万+
StackOverflow上有关于LocalStorage存储和读取Object类型的方法说明。 http://stackoverflow.com/questions/2010892/storing-objects-in-html5-localstorage 这里先提供一下关于存储和读取的通用方法。 写入时注意要使用JSON.stringfy()方法将写入的对象或Array字符串
基于typescript封装localstorage,sessionstorage模块
weixin_51897979的博客
12-04 708
utli.ts import {LocalCacheType} from "./type/type"; function LocalCache(type?:string){ if(type === 'localStorage' || type === undefined){ return new UseLocalStorage() }else { return new UseSessionStorage() } } class UseLocalSt.
如何在Vue3中使用本地存储localStorage保存数据？
有我更精彩的博客
06-11 2749
是 Web Storage API 的一部分，允许我们在用户的浏览器中存储和检索数据。与不同，中的数据在浏览器会话结束后不会被删除，除非显式地被清除。这使得成为持久化数据的理想选择，如用户设置、购物车信息等。Vue3 是一个用于构建用户界面的渐进式JavaScript框架。相较于Vue2，Vue3在性能优化、组合API的引入、TypeScript支持等方面有显著提升。下面我们会结合Vue3，来看如何利用来保存数据。在这篇博客中，我们探讨了如何在 Vue3 中使用。
sessionStorage和localStorage的封装 typescript+vue3
weixin_51710069的博客
01-06 2154
在写项目的时候，需要储存一些东西为页面之间数据传递，第一个想到的就是vuex，但是你会发现有时候页面刷新一下存在vuex里面的数据就会丢失。 import { createStore } from 'vuex' export default createStore({ state: { }, mutations: { }, actions: { }, modules: { } }) HTML5的WebStorage提供了两种API localSto
前端localStorage使用
QDzzzhy
04-29 4999
何为localStorage? 在html5中,新增了localStorage和sessionStorage来实现本地存储,它们统称为web Storage.目的是为了解决cookie存储空间不足的问题.这里笔者只提及localStorage的使用 localStorage的优势和不足 优势 存储空间的扩大(一般为5M) 没有时间限制,若不手动删除的话可以永久存储 不足 浏览器大小规范不...
vue3+vuex4+pinia+typescript实现token的
06-08
实现 token 的方法，可以参考下面的代码实现： 在 `src/store` 目录下新建 `auth` 目录，用于存放认证相关的代码。 ```typescript // src/store/auth/state.ts export interface AuthState { token: string | null; } export const state: AuthState = { token: localStorage.getItem('token') || null, }; ``` ```typescript // src/store/auth/mutations.ts import { AuthState } from './state'; export const mutations = { setToken(state: AuthState, token: string) { state.token = token; localStorage.setItem('token', token); }, clearToken(state: AuthState) { state.token = null; localStorage.removeItem('token'); }, }; ``` ```typescript // src/store/auth/actions.ts import { ActionContext } from 'vuex'; import { AuthState } from './state'; import { RootState } from '../root-state'; export const actions = { async login(context: ActionContext<AuthState, RootState>, payload: { username: string; password: string }) { // 发送登录请求 const response = await fetch('/api/login', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify(payload), }); if (response.ok) { const { token } = await response.json(); context.commit('setToken', token); } else { throw new Error('登录失败'); } }, logout(context: ActionContext<AuthState, RootState>) { context.commit('clearToken'); }, }; ``` ```typescript // src/store/auth/index.ts import { Module } from 'vuex'; import { AuthState, state } from './state'; import { mutations } from './mutations'; import { actions } from './actions'; import { RootState } from '../root-state'; export const auth: Module<AuthState, RootState> = { namespaced: true, state, mutations, actions, }; ``` 然后，在 `src/store` 目录下新建 `index.ts` 文件，用于创建 store 实例。 ```typescript // src/store/index.ts import { createStore } from 'vuex'; import { auth } from './auth'; import { RootState } from './root-state'; export const store = createStore<RootState>({ modules: { auth, }, }); ``` 最后，在 `main.ts` 中引入 store 实例，并在根组件中注入。 ```typescript // main.ts import { createApp } from 'vue'; import App from './App.vue'; import { store } from './store'; const app = createApp(App); app.use(store); app.mount('#app'); ``` 这样，就可以在组件中通过 `this.$store.state.auth.token` 访问 token 了。在登录成功后，通过 `this.$store.dispatch('auth/login', { username, password })` 更新 token；在注销时，通过 `this.$store.dispatch('auth/logout')` 清除 token。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值