要求：在页面中使用输入框输入回车后将数据保存到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_TODOSET_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=''}
}
