使用Vue3，TypeScript，Pinia搭建项目框架

最近 Vue3 和 Pinia 是相当的热门，本文尝试使用 Vue3 和 Pinia 搭建项目框架，并集成 TypeScript，可以用来当做项目的脚手架。废话不说多，接下来我们一步步把 Vue3，Pinia，TypeScript 集成起来。

相信大家 Vue3 和 Typescript 已经很熟悉了，但是 Pinia 是个什么东西？其实 Pinia 是随着 Vue3 框架而产生的新的一个新的轻量级的状态管理库，它的主要特点是：

😀 可以像定义组件一样定义 store，自动拆分 stores
🍯 完美支持 TypeScript
🐱 支持同步和异步 actions

Pinia 已经被 Vue 官方认可为新的状态管理库，感觉 Vuex 要失宠了。😄

Pinia

安装教程

首先安装 Vue Cli，如果已经安装直接跳过这一步，如果没有安装，可以通过 npm 全局安装，如果是 Mac 要全局安装可能需要在命令前面加 sudo

npm i -g @vue/cli
// mac
sudo npm i -g @vue/cli

安装完成后，可以通过 vue 命令来创建 Vue 项目，我们创建一个叫 vue3-study 的项目。

vue create vue3-study

vue create

这里选择 Vue3，然后选择 yarn，接下来安装 TypeScript

vue add typescript

这里一路 Yes 就可以了，最后安装 Pinia

npm i pinia@next -S

最后直接启动项目

npm run serve

开始编码

创建 src/models/todo-item.ts 文件，声明一个 TodoItem

export interface TodoItem {
  id: number;
  text: string;
  done: boolean;
}

接下来设置 Pinia，在 main.ts 文件里面新增下面代码

import { createApp } from "vue";
import { createPinia } from "pinia";

import App from "./App.vue";

createApp(App).use(createPinia()).mount("#app");

初始化 store，创建 src/store/index.ts 文件并且添加下面代码，通过 pinia 提供的 defineStore 来定义 store，state 声明状态，actions 声明方法，用来改变 state，具体功能查看注释

import { getTodoList, TodoItem } from '@/models/todo';
import { defineStore } from 'pinia';

// 函数用use开头，是一种风格
export const useMainStore = defineStore('mainStore', {
  state: () => {
    return {
      todoList: getTodoList(),
    };
  },
  actions: {
    // 新增一个todo
    addTodo(text: string) {
      console.log('addtodo')
      if (!text) return;
      this.todoList.push({
        id: +new Date(),
        text,
        done: false,
      } as TodoItem)
    },
    // 更新todo状态
    toggleTodo(id: number) {
      const todo = this.todoList.find(todo => todo.id === id);
      if (todo) todo.done = !todo.done;
    },
    // 删除todo
    deleteTodo(id: number) {
      this.todoList = this.todoList.filter(todo => todo.id !== id);
    }
  }
})

接下来修改 App.vue 文件的代码如下，跟 Vuex 类似，提供了 mapState 和 mapActions 方法，用来映射 state 和 actions

<template>
  <h3>Todo List</h3>
  <div><input type="text" v-model="newTodo" /> <button @click="addTextTodo">新增</button></div>
  <ul>
    <li v-for="todo in todoList" :key="todo.id">
      {{ todo.text }} - {{ todo.done ? '完成' : '未完成' }}
      <input type="checkbox" @change="toggleTodo(todo.id)" :checked="todo.done" />
      <button @click="deleteTodo(todo.id)">删除</button>
    </li>
  </ul>
</template>

<script lang="ts">
  import { Options, Vue } from "vue-class-component";
  import { mapState, mapActions } from "pinia";
  import { useMainStore } from "./store";

  @Options({
    computed: {
      ...mapState(useMainStore, ["todoList"]),
    },
    methods: {
      ...mapActions(useMainStore, ["addTodo", "toggleTodo", "deleteTodo"]),
      addTextTodo() {
        this.addTodo(this.newTodo);
        this.newTodo = "";
      },
    },
  })
  export default class App extends Vue {}
</script>