Vue3 + ts+ pinia作持久化存储（包含史上最细使用示例）

<template>
  <div>
    <input v-model="inputValue" @input="handleInput" />
    <button @click="addItem">Add</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {{ item }}
        <button @click="removeItem(index)">Remove</button>
      </li>
    </ul>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
import { useStore } from 'pinia';
import { ListStore } from './stores/listStore';
 
export default defineComponent({
  setup() {
    const store = useStore(ListStore);
    const inputValue = ref('');
 
    const handleInput = () => {
      store.inputValue = inputValue.value;
    };
 
    const addItem = () => {
      store.addItem();
      inputValue.value = '';
    };
 
    const removeItem = (index: number) => {
      store.removeItem(index);
    };
 
    return {
      inputValue,
      handleInput,
      addItem,
      removeItem,
      items: store.items,
    };
  },
});
</script>

在这个例子中，我们创建了一个简单的Vue组件，它包含了一个输入框和一个按钮用于添加条目，以及一个列表展示已添加的条目和一个按钮用于删除各个条目。组件使用了Pinia作为状态管理库，并通过defineComponent和setup函数进行了配置。这个例子展示了如何在Vue 3和TypeScript环境下使用Pinia进行状态管理和状态持久化。