Vite+TS项目：论如何便捷的使用pinia

vue新一代状态管理库，相当于vuex

1.像定义components一样定义store  2.支持ts  3.去除mutations，只有state，getters，actions（支持同步异步）  4.轻量级（1kb）  5.vuex是要有主入口进行统一导入，pinia可以分模块导入

项目全局安装  @type/node  npm install @types/node --save-dev

项目全局安装  pinia  npm install pinia --save-dev

import { defineStore } from 'pinia' export default defineStore('myGlobalState', {     state: () => {         return {             count: 1,             message: 'Hello world',             phone: 13811111199         }     },     actions:{         countAdd(){             this.count++         }     },     getters:{         countSum(state){             return state.count*2         }     } })

<script setup lang="ts"> import useCommonStore from '@/store/index' import {storeToRefs} from "pinia"; const store = useCommonStore() const data = storeToRefs(store) // 常规方法修改内容 const storeAdd = ()=>{   data.count.value++ } // $patch修改内容 const storeAddOne = ()=>{   store.$patch({     count:store.count+1   }) } // $patch修改内容，内带对象 const storeAddTwo = ()=>{   store.$patch((state)=>{     state.count++   }) } // $state修改整体内容 const storeRest = ()=>{   store.$state = {     count: 1,     message: 'Hello world',     phone: 13811111199   } } // $reset重置为初始内容 const storeRestOne = ()=>{   store.$reset() } // $subscribe监听整个仓库变化 store.$subscribe((mutation,store)=>{   console.log("mutation",mutation)   console.log("store",store) }) </script>  <template>   <div class="box">     <h2>       {{store.count}}       getters获取值{{store.countSum}}       <el-button @click="storeAdd" type="primary">添加一</el-button>       <el-button @click="storeAddOne" type="primary">添加二</el-button>       <el-button @click="storeAddTwo" type="primary">添加三</el-button>       <el-button @click="storeRest" type="primary">重置一</el-button>       <el-button @click="storeRestOne" type="primary">重置二</el-button>       <el-button @click="store.countAdd" type="primary">actions调用</el-button>     </h2>   </div> </template>  <style scoped lang="stylus"> .box   text-align center   line-height 150px </style>