vue3+ts+pinia+vite 初步使用pinia存储数据

1、将vue2升级到vue3

npm install -g @vue/cli@next

2、安装vite

npm i @vitejs/plugin-vue
npm i @types/node
npm i vite

3、安装typescript

npm i typescript

4、会报错

 解决：

1）在main.ts同级下新建env.d.ts文件

declare module '*.vue' {
    import { ComponentOptions } from 'vue'

    const componentOptions: ComponentOptions

    export default componentOptions

}

2）修改tsconfig.json

// 修改tsconfig.json
{
  "compilerOptions": {
    "baseUrl": ".",
    "target": "ESNext",
    "useDefineForClassFields": true,
    "module": "ESNext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "esModuleInterop": true,
    "lib": ["ESNext", "DOM"],
    "skipLibCheck": true,
    "noEmit": true,
    "paths": {
      "~/*":["src/*"]
    }
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"],
  "references": [{ "path": "./tsconfig.node.json" }],
  //关键一步，除了以下两个文件，都引入，使得项目认识*.d.ts文件，从而配合下文讲到的插件实现自动引入
  "exclude": ["dist", "node_modules"]
}

5、安装pinia

npm i pinia
npm i pinia-plugin-persistedstate

6、main.js引入

import { createPinia } from 'pinia'
import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
const app = createApp(App)
app.use(createPinia().use(piniaPluginPersistedstate))

 注意：main.ts引入是因为防止报错

报错信息为：
"getActivePinia()" was called but there was no active Pinia. Did you forget to install pinia?

7、创建store文件，新建index.ts ||  counter.ts

// index.ts

import { createPinia } from "pinia";

const pinia = createPinia()

export default pinia

// counter.ts

//定义关于counter的store
import { defineStore } from 'pinia'

/*defineStore 是需要传参数的，其中第一个参数是id，就是一个唯一的值，
简单点说就可以理解成是一个命名空间.
第二个参数就是一个对象，里面有三个模块需要处理，第一个是 state，
第二个是 getters，第三个是 actions。
*/
const useCounter = defineStore("counter", {
  state: () => ({
    count: 66,
  }),

  getters: {

  },

  actions: {

  }
})

//暴露这个useCounter模块
export default useCounter

8、组件中引用

// App.vue

<template>
  <!-- 在页面中直接使用就可以了 不用 .state-->
  <div>展示pinia的counter的count值:{
   
   { counterStore.count }}</div>
</template>

<script lang="ts" setup>
// 首先需要引入一下我们刚刚创建的store
import useCounter from "./store/counter";
// 因为是个方法，所以我们得调用一下
const counterStore = useCounter();
</script>

9、页面展示