使用VueCli3+TypeScript+Vuex一步步构建todoList的方法

使用VueCli3+TypeScript+Vuex一步步构建todoList

本文将带领大家了解使用VueCli3+TypeScript+Vuex来构建一个简单的todoList。

初始化项目

首先，在命令行中使用以下命令初始化项目：

vue create todoList

在安装过程中，可以选择Manually select features来手动选择需要安装的特性；也可以在需要的地方添加TypeScript的支持，在后面的过程中，我们将更详细地了解这些细节。

安装Vuex

安装Vuex的命令如下：

npm install vuex --save

创建store文件和模块

在src目录下创建一个store文件夹，再创建一个index.ts文件和一个modules文件夹，用于放置各个模块的ts文件。

在index.ts文件中，我们初始化了一个Store，并且引入了modules中的模块。

import Vue from 'vue'
import Vuex, { Store } from 'vuex'
import { state, mutations } from './modules/todo'

Vue.use(Vuex)

const store: Store<any> = new Vuex.Store({
  state,
  mutations
})

export default store

在modules文件夹中，我们创建了一个todo.ts文件，该文件包含了todoList所需要的状态、行为和其它逻辑。以下是示例代码：

import { MutationTree } from 'vuex'
import { TodoState } from '../definitions'

export const state: TodoState = {
  todos: [
    { id: 1, text: 'Learn TypeScript', completed: true },
    { id: 2, text: 'Learn Vue', completed: false }
  ]
}

const mutations: MutationTree<TodoState> = {
  // Add a new todo
  ADD_TODO (state, {text}) {
    state.todos.push({
      id: state.todos.length + 1,
      text,
      completed: false
    })
  },

  // Remove a todo
  REMOVE_TODO (state, {index}) {
    state.todos.splice(index, 1)
  },

  // Toggle todo completed
  TOGGLE_TODO_COMPLETED (state, {index}) {
    state.todos[index].completed = !state.todos[index].completed
  }
}

export default {
  state,
  mutations
}

创建组件

现在，我们可以开始创建todoList所需要的组件。以下是一个使用Vue单文件组件实现的示例。

<template>
  <div>
    <ul>
      <li v-for="(todo, index) in todos" :key="todo.id">
        <input type="checkbox" v-model="todo.completed" @change="toggleCompleted(todo, index)">
        <span :class="{ completed: todo.completed }">{{ todo.text }}</span>
        <button @click="remove(index)">Remove</button>
      </li>
    </ul>
    <input type="text" v-model="newTodo" @keyup.enter="add">
  </div>
</template>

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import { Todo } from '../definitions'

  @Component
  export default class ToDoList extends Vue {
    todos: Todo[] = this.$store.state.todos
    newTodo: string = ''

    add (): void {
      this.$store.commit('ADD_TODO', {text: this.newTodo})
      this.newTodo = ''
    }

    remove (index: number): void {
      this.$store.commit('REMOVE_TODO', {index})
    }

    toggleCompleted (todo: Todo, index: number): void {
      this.$store.commit('TOGGLE_TODO_COMPLETED', {index})
    }
  }
</script>

集成组件和store

为了正常使用store，我们需要在入口文件main.ts中引入store并挂载到Vue上。代码如下：

import Vue from 'vue'
import store from './store'

import ToDoList from './components/ToDoList.vue'

Vue.config.productionTip = false

new Vue({
  store,
  render: h => h(ToDoList)
}).$mount('#app')

示例说明

以下是一个关于如何使用VueCli3+TypeScript+Vuex构建与API交互的todoList示例。

首先，我们需要更新项目的dependencies，增加一些API调用所需的库。

npm install axios @types/axios --save

然后，我们需要添加一个新的store模块，用于处理API的调用。以下是示例代码：

import { ActionTree } from 'vuex'
import { Todo, TodoState } from '../definitions'
import axios from 'axios'

const BASE_URL: string = 'http://localhost:3000'

const actions: ActionTree<TodoState, any> = {
  fetchTodos ({ commit }): void {
    axios.get(`${BASE_URL}/api/todos`).then(({ data }) => {
      commit('SET_TODOS', data)
    })
  },

  addTodo ({ commit }, todo: Todo): void {
    axios.post(`${BASE_URL}/api/todos`, todo).then(({ data }) => {
      commit('ADD_TODO', data)
    })
  },

  removeTodo ({ commit }, todo: Todo): void {
    axios.delete(`${BASE_URL}/api/todos/${todo.id}`).then(() => {
      commit('REMOVE_TODO', {id: todo.id})
    })
  },

  toggleCompleted ({ commit }, todo: Todo): void {
    axios.patch(`${BASE_URL}/api/todos/${todo.id}`, todo).then(() => {
      commit('TOGGLE_TODO_COMPLETED', {id: todo.id})
    })
  }
}

export default actions

接着，我们需要更新组件代码以引用API调用。以下是示例代码：

<script lang="ts">
  import { Component, Vue } from 'vue-property-decorator'
  import { Todo } from '../definitions'

  @Component
  export default class ToDoList extends Vue {
    todos: Todo[] = []

    created (): void { this.fetchTodos() }

    async fetchTodos (): Promise<void> {
      await this.$store.dispatch('fetchTodos')
      this.todos = this.$store.state.todos
    }

    add (): void {
      const todo: Todo = { text: this.newTodo, completed: false }
      this.$store.dispatch('addTodo', todo).then(() => {
        this.newTodo = ''
      })
    }

    remove (todo: Todo): void {
      this.$store.dispatch('removeTodo', todo)
    }

    toggleCompleted (todo: Todo): void {
      this.$store.dispatch('toggleCompleted', todo)
    }
  }
</script>

这些代码将使用API实现了get、post、delete和patch方法，从而和后端建立了交互，并使用vuex的action处理异步调用。