vue3.0 + ts 之 vuex的使用

vue3.0 + ts 之 vuex的使用

• vuex执行流程图
  

• 执行流程：
  • 第一大步：
    • 1：先在组件之中触发 dispatch 分发到 actions
    • 2：在src 之下hooks文件/index.ts
      • 里面有着当前dispatch所需要触发的到mutations的事件
      • 需要引入相对应的约束条件等actionsType 类型 && typeing 接口类型， && 还有vuex等
      • 之后的话，在里面设置操作todoList的事件，并且导出方法等
  • 第二大步：
    • 1：在actions.ts文件之中提交到mutations/
    • 2：需要引入·接口的规范，还有当前声明唯一的变量的 actions类型 ，还有commit·
  • 第三大步：
    • 1：在mutations.ts之中，把当前的dispatch的数据，在这边进行处理，修改state的数据
    • 2：前提：需要引入接口类型 && actions类型，之后修改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：输入 傻屌 回车
    
• 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);
  }
}