vue3.0+vuex+typescript 入门项目描述

先写仓库地址：https://gitee.com/orderkk/vuex-vue3.0-ts.git

项目目录介绍：

目录介绍：

assets: 存放静态文件资源
components：存放组件文件
hooks: 剥离了项目中的methods，封装了一些基本方法
store：vuex存放的目录
typings: 存放typescript interface的目录

粘贴部分代码：

// @/store/index.ts
import { createStore } from 'vuex'
import state from './state'
import mutations from './mutations'
import actions from './actions'
export default createStore({state,mutations,actions,modules: {}
})

// @/store/actions.ts
import { IState, ITodo } from "@/typings";
import { Commit } from "vuex";
import { REMOVE_TODO, SET_DOING, SET_STATUS, SET_TODO, SET_TODO_LIST } from "./actionTypes";
interface ICtx {commit: Commit,state: IState
}
export default {[SET_TODO]({ commit }: ICtx, todo: ITodo): void {commit(SET_TODO, todo)},[SET_TODO_LIST]({ commit }: ICtx, todoList: ITodo[]): void {commit(SET_TODO_LIST, todoList)},[REMOVE_TODO]({ commit }: ICtx, id: number): void {commit(REMOVE_TODO, id)},[SET_STATUS]({ commit }: ICtx, id: number): void {commit(SET_STATUS, id)},[SET_DOING]({ commit }: ICtx, id: number): void {commit(SET_DOING, id)}
}Ï

// @/store/actionTypes.ts
export const SET_TODO: string = 'SET_TODO'
export const SET_TODO_LIST: string = 'SET_TODO_LIST'
export const REMOVE_TODO: string = 'REMOVE_TODO'
export const SET_STATUS: string = 'SET_STATUS'
export const SET_DOING: string = 'SET_DOING'

// @/store/mutations.ts
import { IState, ITodo, TODO_STATUS } from "@/typings";
import { REMOVE_TODO, SET_DOING, SET_STATUS, SET_TODO, SET_TODO_LIST } from "./actionTypes";export default {[SET_TODO](state: IState, todo: ITodo): void {state.list = [todo, ...state.list]},[SET_TODO_LIST](state: IState, todoList: ITodo[]): void {state.list = todoList},[REMOVE_TODO](state: IState, id: number) {state.list = state.list.filter((item: ITodo) => item.id != id)},[SET_STATUS](state: IState, id: number) {state.list = state.list.map((item: ITodo) => {if (item.id === id) {switch (item.status) {case TODO_STATUS.FINISHED:item.status = TODO_STATUS.WILLDObreak;case TODO_STATUS.WILLDO:item.status = TODO_STATUS.FINISHEDbreak;case TODO_STATUS.DOING:item.status = TODO_STATUS.FINISHEDbreak;default:break;}}return item})},[SET_DOING](state: IState, id: number) {state.list = state.list.map((item: ITodo) => {if (item.id != id) {if (item.status === TODO_STATUS.DOING) {item.status = TODO_STATUS.WILLDO}} else {item.status = item.status === TODO_STATUS.WILLDO ? TODO_STATUS.DOING : TODO_STATUS.WILLDO}return item})}
}

// @/store/state.ts
import { IState } from "@/typings";
export default <IState>{list: []
}

// @/typings/index.ts
enum TODO_STATUS {FINISHED = 'finished',WILLDO = 'willdo',DOING = 'doing'
}
interface ITodo {id: number,content: string,status: TODO_STATUS
}
interface IState {list: ITodo[]
}
export {TODO_STATUS,ITodo,IState
}

// @/App.vue
<template><div class="wrapper"><todo-input /><todo-list :todoLists="todoLists" /></div>
</template>
<script lang="ts">
import { computed, defineComponent, onMounted } from "vue";
import TodoList from "./components/TodoList/Index.vue";
import TodoInput from "./components/TodoInput/Index.vue";
import { IUseTodo, useTodo } from "./hooks";
import { Store, useStore } from "vuex";
export default defineComponent({name: "App",components: {TodoList,TodoInput,},setup() {const { setTodoList }: IUseTodo = useTodo();const store: Store<any> = useStore();onMounted(() => {setTodoList();});return {todoLists: computed(() => {return store.state.list;}),};},
});
</script>

// @/hooks/index.ts
import { REMOVE_TODO, SET_DOING, SET_STATUS, SET_TODO, SET_TODO_LIST } from "@/store/actionTypes"
import { ITodo, TODO_STATUS } from "@/typings"
import { watch } from "vue"
import { Store, useStore } from "vuex"
interface IUseTodo {setTodo: (value: string) => void,setTodoList: () => void,removeTodo: (id: number) => void,setStatus: (id: number) => void,setDoing: (id: number) => void
}
interface IUseLocalStorage {getLocalList: () => ITodo[]setLocalList: (todolist: ITodo[]) => void
}
function useLocalStorage(): IUseLocalStorage {function getLocalList(): ITodo[] {return JSON.parse(localStorage.getItem('todolist') || '[]')}function setLocalList(todolist: ITodo[]): void {localStorage.setItem('todolist', JSON.stringify(todolist))}return {getLocalList,setLocalList}
}
function useTodo(): IUseTodo {const store: Store<any> = useStore();const { getLocalList, setLocalList }: IUseLocalStorage = useLocalStorage();const todolist: ITodo[] = getLocalList()watch(() => {return store.state.list}, (todolist) => {setLocalList(todolist)})function setTodo(value: string): void {const todo: ITodo = {id: Date.now(),content: value,status: TODO_STATUS.WILLDO}store.dispatch(SET_TODO, todo)// setLocalList(store.state.list)}function setTodoList(): void {store.dispatch(SET_TODO_LIST, todolist)}function removeTodo(id: number): void {store.dispatch(REMOVE_TODO, id)// setLocalList(store.state.list)}function setStatus(id: number): void {store.dispatch(SET_STATUS, id)// setLocalList(store.state.list)}function setDoing(id: number): void {store.dispatch(SET_DOING, id)// setLocalList(store.state.list)}return {setTodo,setTodoList,removeTodo,setStatus,setDoing}
}
export {IUseTodo,useTodo,useLocalStorage
}

// @/components/TodoInput/Index.vue
<template><div><input type="text" v-model="todoValue" @keyup.enter="setTodoValue" /></div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from "vue";
import { useTodo, IUseTodo } from "../../hooks/index";
export default defineComponent({name: "TodoInput",setup() {let todoValue = ref<string>("");const { setTodo }: IUseTodo = useTodo();const setTodoValue = (e: KeyboardEvent): void => {setTodo(todoValue.value);todoValue.value = "";};return {todoValue,setTodoValue,};},
});
</script>

// @/components/TodoList/Index.vue
<template><div><h1>todo-list</h1><todo-itemv-for="item in todoLists":key="item.key":item="item"@removeTodo="removeTodo"@setStatus="setStatus"@setDoing="setDoing"/></div>
</template>
<script lang="ts">
import { defineComponent, onMounted, PropType } from "vue";
import TodoItem from "./Item.vue";
import { ITodo } from "../../typings/index";
import { IUseTodo, useTodo } from "../../hooks";
export default defineComponent({name: "TodoList",props: {todoLists: Array as PropType<ITodo[]>,},components: {TodoItem,},setup(props, { emit }) {const { removeTodo, setStatus, setDoing }: IUseTodo = useTodo();return {removeTodo,setStatus,setDoing,};},
});
</script>

// @/components/TodoList/Item.vue
<template><div><inputtype="checkbox":checked="item.status === FINISHED"@click="setStatus(item.id)"/><span :class="item.status === FINISHED ? 'line-thoungth' : ''">{{ item.content }}</span><button @click="removeTodo(item.id)">删除</button><buttonv-if="item.status != FINISHED"@click="setDoing(item.id)":class="item.status === DOING ? 'doing' : 'willdo'">{{ item.status === DOING ? "正在做..." : "马上做..." }}</button></div>
</template>
<script lang="ts">
import { defineComponent, PropType } from "vue";
import { ITodo, TODO_STATUS } from "../../typings";
interface IStatusState {DOING: TODO_STATUS;WILLDO: TODO_STATUS;FINISHED: TODO_STATUS;
}
export default defineComponent({name: "TodoItem",props: {item: Object as PropType<ITodo>,},setup(props, { emit }) {const statusState: IStatusState = {DOING: TODO_STATUS.DOING,WILLDO: TODO_STATUS.WILLDO,FINISHED: TODO_STATUS.FINISHED,};const removeTodo = (id: number): void => {emit("removeTodo", id);};const setStatus = (id: number): void => {emit("setStatus", id);};const setDoing = (id: number): void => {emit("setDoing", id);};return {...statusState,removeTodo,setStatus,setDoing,};},
});
</script>
<style scoped>
.line-thoungth {text-decoration: line-through;
}
.doing {background-color: #cdcdcd;color: red;
}
.willdo {background-color: orange;color: #fff;
}
</style>

// @/main.ts
import { createApp } from 'vue'
import App from './App.vue'
import store from './store'createApp(App).use(store).mount('#app')

好的目录结构可以让开发事半功倍，如果没有很好的见解或者是刚开始开发的朋友们，可以参考这个进行开发。

vue3.0+vuex+typescript 入门项目描述相关推荐

【Vue3 造轮子项目 ------ kaite-ui】基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI
基于vue3.0 + vite + TypeScript 实现一个UI框架 - kaiteUI 前言前段时间笔者一直忙于学习Vue3方面新知识,比如如何从vue2.0版本过渡到vue3.0,如何理解 ...
vue2 + vue-router + vuex + iview 入门项目
简单的vue2 + vue-router + vuex + iview 入门项目,一个移动端平台的简易考试系统.灵感来源于近期工作项目中开发的一套考试平台系统.欢迎大家来issues指出错误共同进步. ...
vue3.0 vuex 全局变量存储更改
vue3.0 vuex 全局变量存储更改 main.js 准备vuex的文件使用方法(官方推荐) 页面部分需要先引入vuex 使用dispatch存储或改变数据 index.js部分在stat ...
Vue.js + Vuex + TypeScript 实战项目开发与项目优化
技术栈: Vue.js + Vuex + TypeScript Todo List: 使用Vue CLI初始化项目调整初始目录结构删除初始化的默认文件(对于我们项目是多余的组件components ...
小兔鲜儿Vue3.0前端电商项目实战
小兔鲜儿Vue3.0实现了电商平台主线业务功能,电商首页.一级分类.二级分类.商品详情.购物车.结算.支付.个人中心.订单管理.订单详情. 项目采用前后端分离模式,前台使用了VUE3.0技术栈构建,自 ...
基于Springboot2.0的Dubbo入门项目（dubbo-spring-boot-starter）
Dubbo是阿里巴巴公司开源的一个高性能优秀的服务框架,使得应用可通过高性能的 RPC 实现服务的输出和输入功能,可以和Spring框架无缝集成.最近半年来,Dubbo的得到了快速的维护,官方也推出了 ...
前端vue3.0小兔鲜项目
博主收集到了一个完整的项目前端vue3.0框架的小兔鲜项目,学习前端的小伙伴可以找我来领. 完整的教学视频+代码+笔记项目地址:http://erabbit.itheima.net/ 需要的联系q ...
简单易上手的vue3.0+ts实战小项目！！附带后台接口
vue3+Ts项目实战 1.前言 2.项目演示 3.项目介绍 4.配套的node服务 5.vue3+ts的使用心得 1.vue3的使用体会
idea怎么运行eclipse的web项目_Apache Storm v2.0入门项目的开发、测试和运行（IDEA/Maven）...
第一个Apache Storm v2.0流计算入门项目的开发.测试和运行(IDEA/Maven) 关于流计算框架Apache Storm最新版的安装,可以参考: 流计算框架-最新版Apache Sto ...

vue3.0+vuex+typescript 入门项目描述

先写仓库地址：https://gitee.com/orderkk/vuex-vue3.0-ts.git

项目目录介绍：

目录介绍：

粘贴部分代码：

好的目录结构可以让开发事半功倍，如果没有很好的见解或者是刚开始开发的朋友们，可以参考这个进行开发。

vue3.0+vuex+typescript 入门项目描述相关推荐

最新文章

热门文章