VUE3+Vite+Pinia+TypeScript项目笔记

// store.ts
import { defineStore } from 'pinia'
import { ref } from 'vue'
 
// 使用defineStore创建一个新的store
export const useNotesStore = defineStore({
  id: 'notes',
  state: () => ({
    notes: ref<string[]>([])
  }),
  actions: {
    addNote(note: string) {
      this.notes.push(note)
    }
  }
})

// Notes.vue
<template>
  <div>
    <input v-model="newNote" @keyup.enter="addNote">
    <ul>
      <li v-for="(note, index) in notes" :key="index">{{ note }}</li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue'
import { useNotesStore } from './store'
 
export default defineComponent({
  setup() {
    const notesStore = useNotesStore()
    const newNote = ref('')
 
    function addNote() {
      if (newNote.value.trim()) {
        notesStore.addNote(newNote.value)
        newNote.value = ''
      }
    }
 
    return {
      notes: notesStore.notes,
      newNote,
      addNote
    }
  }
})
</script>

这个例子展示了如何在Vue 3, Vite, Pinia和TypeScript环境中创建一个简单的备忘录应用。store.ts定义了一个使用Pinia的store，其中包含了一个备忘录列表和添加新备忘录的方法。Notes.vue是一个使用该store的Vue组件，它包含了一个输入框用于添加新的备忘录，并显示现有的备忘录列表。