一、创建vite项目

当前vue3版本为 vue3.2

1. npm create vite
2. 输入项目名 vue3_ts_pinia
3. 选择 vue
4. 选择 vue-ts
5. cd vue3_ts_pinia
6. yarn
7. yarn dev

看到这个画面说明OK

 

 

二、安装和使用pinia

先安装pinia包 

yarn add pinia

1. 在mian.js中挂载 pinia  

import { createApp } from "vue";
import "./style.css";
import App from "./App.vue";
import { createPinia } from "pinia";
createApp(App).use(createPinia()).mount("#app");

2. 创建类型声明文件 src/type/user.d.ts 

// 用户的类型声明文件
interface IUser {
  name: string;
  age: number;
}
// ...

3. 创建user模块 

在src下新建目录 store ，旗下新建文件user.ts

import { defineStore } from "pinia";

export default defineStore("user", {
  state() {
    return {
      userList: [] as IUser[],
    };
  },
  actions: {
    getList() {
      // 模拟从后端获取数据
      let resList: IUser[] = [
        { name: "张三", age: 18 },
        { name: "李四", age: 19 },
      ];
      //   resList[0].name  此时resList[0]只能点出 name 或 age
      this.userList = resList;
    },
  },
});

4. src/store 目录新建 index.ts 文件 

import useUserStore from "./user";

export default function useStore() {
  return {
    user: useUserStore(),
  };
}

5. App.vue中使用

<script setup lang="ts">
// 从状态层导出指定模块
import useStore from "./store";
const { user } = useStore();
// 获取用户列表
user.getList();
</script>

<template>
  <div>
    <ul>
      <li v-for="item in user.userList">
        姓名：{{ item.name }} ---- 年龄：{{ item.name }}
      </li>
    </ul>
  </div>
</template>

6. 最终效果

多个模块像user.ts一样创建，使用同理