vue3.0 + ts 之 vuex的使用
目录vue3.0 + ts 之 vuex的使用todo/ToDoList.vuetodo/ToDoInput.vuesrc / hooks /index.tssrc / typeing / index.tsstore / state.tsstore / actionsType.tsstore / actions.tsstore / mutations.tsvue3.0 + ts 之 vuex的使用
·
目录
vue3.0 + ts 之 vuex的使用
- vuex执行流程图
- 执行流程:
- 第一大步:
- 1:先在组件之中触发
dispatch 分发到 actions
- 2:在
src 之下hooks文件/index.ts
- 里面有着当前dispatch所需要触发的到mutations的事件
- 需要引入相对应的约束条件等
actionsType 类型 && typeing 接口类型, && 还有vuex等
- 之后的话,在里面设置操作
todoList的事件
,并且导出方法等
- 1:先在组件之中触发
- 第二大步:
- 1:在
actions.ts文件
之中提交到mutations
/ - 2:需要引入·接口的规范,还有当前声明唯一的变量的 actions类型 ,还有commit·
- 1:在
- 第三大步:
- 1:在
mutations.ts
之中,把当前的dispatch的数据,在这边进行处理,修改state的数据
- 2:前提:需要引入
接口类型 && actions类型
,之后修改state
- 1:在
- 第四大步:
- 定义state数据,需要引入
接口类型进行规范数据类型
- 定义state数据,需要引入
- 第一大步:
- vuex的文件目录
- index.ts:
vuex的导入与导出等架构
- state.ts:
唯一数据源头
- actionsType.ts:
actions 规定的类型
- actions.ts:
actions 对数据的提交到 mutaions之中
- mutations.ts:
把actions 操作 转化为同步,修改state的数据
- 注意点:
- 1:就是触发
dispatch
的方法,抽离到src/hooks/index.ts
文件之中了。 - 2:就是组件在使用hooks里面的触发函数事件的时候,需要引入并且解构等!
- 1:就是触发
- index.ts:
- 操作流程
- 1:输入 傻屌 回车
- 1:输入 傻屌 回车
- 2:打印出state之中的数据
todo/ToDoList.vue
<template>
<div>
<ToDoInput />
<ToDoItem />
</div>
</template>
<script lang='ts'>
import ToDoInput from "./ToDoInput.vue";
import ToDoItem from "./ToDoItem.vue";
import { defineComponent } from "vue";
export default defineComponent({
name: "ToDoList",
components: {
ToDoInput,
ToDoItem
},
setup() {
return {};
}
});
</script>
todo/ToDoInput.vue
- 头部的input输入框
<template>
<div>
<input type="text" name id v-model="todoValue" @keyup="setTodoValue" />
</div>
</template>
<script lang='ts'>
import { defineComponent, ref } from "vue";
import { useTodo, IUseTodo } from "../../hooks/index";
export default defineComponent({
name: "ToDoInput",
components: {},
setup() {
let todoValue = ref<string>("");
const { setTodo }: IUseTodo = useTodo();
const setTodoValue = (e: KeyboardEvent): void => {
if (e.keyCode === 13 && todoValue.value.trim().length) {
setTodo(todoValue.value);
todoValue.value = "";
}
};
return {
todoValue,
setTodoValue
};
}
});
</script>
src / hooks /index.ts
- dispatch之中 抽离出来的东西,需要分发到mutations之中的事件
import { SET_TODO } from "@/store/actionsType"
import { IToDo, TODO_STATUS } from "@/typeing"
import { Store,useStore } from "vuex"
export interface IUseTodo{
setTodo:(value:string) => void,
}
function useTodo(): IUseTodo {
const store: Store<any> = useStore();
function setTodo(value:string):void {
const todo: IToDo = {
id: new Date().getTime(),
content: value,
status:TODO_STATUS.WILLDO
}
store.dispatch(SET_TODO,todo)
}
return {
setTodo,
}
}
export {
useTodo
}
src / typeing / index.ts
- 制定一个接口,对数据的类型进行规范
interface IToDo{
id: number;
content: string;
status:TODO_STATUS
}
interface ISTATUS {
list:IToDo[]
}
enum TODO_STATUS {
WILLDO = "willdo",
DIING = "doing",
FINISHED = "finished"
}
export {
IToDo,
ISTATUS,
TODO_STATUS
}
store / state.ts
import { ISTATUS } from "@/typeing";
export default <ISTATUS>{
list: []
}
/**
* list:[]
* listItem:{
* id: new Date().getTime -> 时间戳 一个number类型
* content: string
* state: FINISH DOING WILLDO -> 枚举类型
* }
*
*/
store / actionsType.ts
- 对actions的提交进行规范,声明一个const变量,使得唯一
export const SET_TODO: string = "SET_TODO";
store / actions.ts
- 对于dispatch事件,进行提交到mutations之中
import { ISTATUS, IToDo } from "@/typeing";
import { Commit } from "vuex";
import { SET_TODO } from "./actionsType";
interface ICtx{
commit: Commit,
state:ISTATUS
}
export default {
[SET_TODO]({commit}:ICtx,todo:IToDo):void {
commit("SET_TODO",todo)
}
}
store / mutations.ts
- 对于分发来的mutations事件,进行处理,修改state的数据
import { SET_TODO } from "./actionsType";
import { ISTATUS, IToDo } from "@/typeing";
export default {
SET_TODO(state:ISTATUS, todo:IToDo ):void {
state.list.unshift(todo);
console.log('mutations之中的',todo,"state.list",state.list);
}
}
更多推荐
已为社区贡献15条内容
所有评论(0)