src/store/index.ts

  • 删除编辑功能未完成 ```typescript import { createStore } from “vuex”;

const store = createStore({ modules: { todoListStore: { namespaced: true, state: { list: [], }, actions: { addtodo(store, data) { const action = { type: “ADDTODO”, payload: data.todoitem, }; store.commit(action); }, }, mutations: { ADDTODO(state, action) { state.list.unshift({ id:state.list.length+1, task:action.payload }) }, }, }, }, }); export default store;

  1. scr/components/todoList.vue
  2. ```vue
  3. <template>
  4.   <div>
  5.     <h1>todoList</h1>
  6.     <input type="text" @keydown.enter="add" v-model="todoitem" />
  7.     <ul>
  8.         <li v-for="item in list" :key="item.id">
  9.             <span>{{item.task}}</span><button>edit</button><button>delete</button>
  10.         </li>
  11.     </ul>
  12.   </div>
  13. </template>
  15. <script lang="ts">
  16. import { defineComponent, computed, reactive,toRefs } from "vue";
  17. import { useStore } from "vuex";
  19. export default defineComponent({
  20.   setup() {
  21.     const state =reactive({
  22.         todoitem:''
  23.     })
  24.     const store = useStore();
  25.     const list = computed(() => store.state.todoListStore.list);
  26.     const add=()=>{
  27.         store.dispatch({
  28.             type:"todoListStore/addtodo",
  29.             todoitem:state.todoitem
  30.         })
  31.         state.todoitem=''
  32.     }
  33.     return{
  34.         list,add,...toRefs(state)
  35.     }
  36.   },
  37. });
  38. </script>

优化：
使用ES6的结构优化代码

  1. actions: {
  2.     // addtodo(store, data) {
  3.     //    const action = {
  4.     //     type: "ADDTODO",
  5.     //     payload: data.todoitem,
  6.     //   };
  7.     //   store.commit(action);
  8.     // },
  9.     addtodo({commit}, {todoitem}) {
  10.       commit({
  11.         type: "ADDTODO",
  12.         payload: todoitem,
  13.       });
  14.     },
  15.   },
  17.   // mutations: {
  18.   //  ADDTODO(state, action) {
  19.   //    state.list.unshift({
  20.   //      id:state.list.length+1,
  21.   //      task:action.payload
  22.   //    })
  23.   //  },
  24.   // },
  25.   mutations: {
  26.     ADDTODO({list}, {payload}) {
  27.       list.unshift({
  28.         id:list.length+1,
  29.         task:payload
  30.       })
  31.     },
  32.   },

将modules中每一项抽离成一个文件

好处：一个文件一个数据库
store下创建todoListStore.ts

  1. // 用于约定17行commit类型
  2. import { Commit } from "vuex";
  3. // 导出
  4. export default {
  5.   namespaced: true,
  6.   state: {
  7.     list: [],
  8.   },
  9.   actions: {
  10.     addtodo(
  11.       { commit }: { commit: Commit },
  12.       { todoitem }: { todoitem: string }
  13.     ) {
  14.       commit({
  15.         type: "ADDTODO",
  16.         payload: todoitem,
  17.       });
  18.     },
  19.   },
  20.   mutations: {
  21.     ADDTODO({ list }: { list: unknown[] }, { payload }: { payload: string }) {
  22.       list.unshift({
  23.         id: list.length + 1,
  24.         task: payload,
  25.       });
  26.     },
  27.   },
  28. };

在store/index.ts引入

  1. import { createStore } from "vuex";
  2. import * as api from "../api";
  3. // 导入
  4. import todoListStore from './todoListStore'
  5. const store = createStore({
  6.   modules: {
  7.     moviesStore:{
  8.       ....
  9.     },
  10.     countStore:{
  11.       ....
  12.     },
  13.     todoListStore // 直接使用
  14.   }
  15. });
  17. export default store;