vue3+TS+vueX的记录

要求：在页面中使用输入框输入回车后将数据保存到vuex中的数组list中

list为一个数组 内部三个属性为 id  value  status

id为时间戳

value为string 输入的字符串

status为定义的三种状态 待办  在办 完成

 1、创建仓库  将 仓库拆分

import { createStore } from 'vuex'
import state from './state'
import actions from './actions'
import mutations from './mutations'
export default createStore({
  state,
  mutations,
  actions
})

使用action调用mutation中的方法修改state的list

2、定义数据类型

全局定义SET_TODO

export const SET_TODO:string='SET_TODO'

state的总体类型 后续有什么字段就添加什么类型
interface IState{
  list:ITodo[]
}
添加的对象类型
interface ITodo {
  id:number,
  content:string,
  status:TODO_STATUS
}
枚举类型
enum TODO_STATUS{
  WILLDO='willdo',
  DOING='doing',
  FINISHEN='finshing'

}
export {
  ITodo,
  IState,
  TODO_STATUS

}

3、调用

 定义数据的增删改查所有方法合集

举例  调用setTodo方法  将输入框的value传值写入todo数据中

调用SET_TODO 方法

import { SET_TODO } from "@/store/actionsTypes";
import { ITodo, TODO_STATUS } from "@/typings";
import { useStore } from "vuex";


interface IUseTodo{
    setTodo:(value:string)=>void;
    setTodoList:()=>void;
    removeTodo:()=>void;
    setStatus:()=>void;
    setDoing:()=>void;
}
function useTodo() :IUseTodo{
const store=useStore()
  function setTodo(value:string):void {
      const todo:ITodo={
        id:new Date().getTime()
        ,content:value,
        status:TODO_STATUS.WILLDO
      }
     store.dispatch(SET_TODO, todo)
  }
  function setTodoList() {

  }
  function removeTodo() {

  }
  function setStatus() {

  }
  function setDoing() {

  }
  return {
    setTodo,
    setTodoList,
    removeTodo,
    setStatus,
    setDoing,
  };
}
export  {useTodo};

 获取到需要添加上的数据调用mutation方法

import { ITodo, IState } from "@/typings";
import { SET_TODO } from "./actionsTypes";
import { Commit } from "vuex";

interface ICtx {
  commit: Commit;
  state: IState;
}
export default {
   action 去调用mutation的方法
   这定义了stetodo的字符串 等同于 settodo(){}
   action 有两个传入值  ctx 也就是{commit  state}  还有传入值 ITodo 定义过了id之类的相关值

  [SET_TODO]({ commit, state }: ICtx, todo: ITodo): void {
    调用mutation内的方法
    commit(SET_TODO, todo);
  },
};

 将类型为ITodo数据添加到state中的list最后一位

import { IState, ITodo } from "@/typings";

export default{
  // 使用【SET_TODO】是一样的  因为定义的是字符串的SET_TODO
  SET_TODO(state:IState,todo:ITodo):void{
      state.list.unshift(todo)
      console.log(state.list);
      
  }
}

调用  输入框输入 点击回车后调用hooks中的setTodo方法

setTodo是hooks中结构出来的

const getValue=(e:KeyboardEvent)=>{
  if (e.keyCode==13&&inputValue.value.length>0) {
    setTodo(inputValue.value)
    inputValue.value=''
  }
}