Pinia的使用方法包括以下步骤:
-
安装Pinia:通过yarn或npm进行安装:
yarn命令:
yarn add pinia
npm命令:
npm install pinia
-
创建根存储:在main.ts中引入Pinia插件,并创建一个根存储。这可以通过创建一个新的index.ts文件,作为Pinia的入口文件,并在其中创建根Store来实现。
-
定义Store:使用Pinia提供的defineStore()方法来创建一个store,该store用来存放需要全局使用的数据。state是一个函数,返回一个对象,该对象包含应用程序的状态。
-
使用Store:在Vue组件中,通过import语句导入需要使用的store,然后使用store来获取和修改状态。
-
添加State:在store中添加state,state是一个函数,返回一个对象,该对象包含应用程序的状态。
-
创建Actions:在store中创建actions,用于执行异步操作和修改状态。
-
创建Getters:在store中创建getters,用于计算状态
需要注意的是,Pinia的设计使用的是Composition API,更符合Vue3的设计思维。Pinia没有mutations,只有actions。没有命名空间模块,Pinia的store是扁平化结构,创建的多个store都是相互隔离的,没有嵌套关系。不再需要注入、导入函数。