为什么要用Pinia？因为vuex4对typescript的支持让人心酸，所以statemanagement放弃了vuex，采用了pinia。先说说使用PiniaCondition的5个要点：Pinia的API设计非常接近Vuex5提案。（作者为Vue核心团队成员）无需像Vuex4那样自定义复杂类型来支持typescript，天生就具备完美的类型推断。模块化设计，您介绍的每家店铺打包时可以自动拆分。没有嵌套结构，但您可以在任何商店之间交叉组合。Pinia挂接到Vuedevtools，不影响Vue3开发体验。下面简单介绍一下Pinia的使用方法，并对比一下与vuex的区别和注意事项。详情请参考官方文档。在深入Store的核心概念之前，我们需要知道脚手架中构建了哪些Stores，以及如何自定义创建Stores。内置StoreStore描述APIuseUserStore用户登录及信息管理详解useMenuStore路由&菜单管理详解useLogStore日志管理详解创建StorePinia已搭建在脚手架中，并已关联vue，你可以在任何地方创建store：import{defineStore}from'pinia'exportconstuseUserStore=defineStore({id:'user',state:()=>({}),getters:{},actions:{}})这个和Vuex很不一样，它是一个标准Javascript模块导出，这也让开发人员和您的IDE更清楚商店的来源。Pinia和Vuex之间的区别在于，id是将其使用的商店连接到devtools所必需的。创建方法：newVuex.Store(...)(vuex3),createStore(...)(vuex4)。与vuex3相比，state现在是一个函数返回对象。没有突变，别担心，状态变化仍然记录在devtools中。给State添加属性创建store后，可以在state中创建一些属性，state:()=>({name:'codexu',age:18})复制代码将store中的state属性设置为函数，函数返回一个包含不同状态值的对象，非常类似于我们在组件中定义数据的方式。在模板中使用store现在我们想从store中获取name的状态，我们只需要使用下面的方法：

{{userStore.name}}

constuserStore=useUserStore()return{userStore}复制代码请注意，此处不需要userStore.state.name。上面的写法虽然很舒服，但是千万不要用解构来提取它的内部值。如果这样做，它将失去响应能力：const{name,email}=useUserStore()Vuex中的getter和组件中的computed属性具有相同的功能。传统的函数声明使用this代替state参数传递方式，但是箭头函数仍然需要使用函数的第一个参数来获取state，因为箭头函数处理了this作用域：getters:{nameLength(){returnthis.name.length},nameLength:state=>state.name.length,nameLength:()=>this.name.length?}复制代码这里的Actions跟Vuex有很大区别，Pinia只提供了一种方式定义如何改变状态的规则，放弃变异而只依赖于动作，这是一个重大的改变。Pinia使Actions更加灵活。它可以通过组件或其他动作调用。它可以从其他商店操作中调用。可以直接在store实例上调用，支持同步或异步。任意数量的参数可以包含关于如何改变状态的逻辑（即vuex的mutations$patch方法的作用）可以直接改变状态属性actions:{asyncinsertPost(data){awaitdoAjaxRequest(data);this.name='...';Devtoolsscaffolding内置了以下代码，将添加devtools支持：import{createPinia,PiniaPlugin}from'pinia'Vue.use(PiniaPlugin)constpinia=createPinia()复制代码在Vue3中，一些特性像时间旅行和编辑仍然不支持，因为vue-devtools还没有暴露必要的API。