一:了解!

pinia是什么:

pinia是一个跟vuex类似的vue状态管理工具库,尤大在将vue3替换vue默认版本后,强推的就是pinia作为vue新版的状态管理工具。并且pinia的开发团队和vuex是同一个团队。

pinia相较于vuex的优势:

-同时支持vue2和vue3,老项目也可以使用pinia。
-对TS完全支持。-体积较轻,仅有1kb。
-采用模块化设计,符合vue3的Composition api。非常便于拆分状态。
-抛弃了Mutations的操作,只有state、getters和actions.极大的简化了状态管理库的使用。

二:创建项目

1: 安装命令

vue3推荐使用vite来替代webpack构建vue项目。

npm init vite@latest #安装最后的版本。

2:包管理

第一次安装会提醒你安装对应的包管理,选择y回车即可。

3: 项目名称,尽量避免中文名(非强制)

project-name:pinia-demo

4:选择项目的框架

vue || react

5:选择框架版本

vue ||vue-TS|| react......

三:启动项目:

1进入文件夹目录

cd pinia-demo

2安装依赖

npm i

3运行项目

npm run dev

四:安装pinia

npm install pinia

五:创建并挂载pinia实例

1在main.ts里引入Pinia

import { createPinia } from 'pinia'
    改造app挂载方式
    2创建pinia实例
    const pinia = 炽热奥特Pinia()
    3挂载到vue的根实例上
    app.use(pinia)

五:创建store状态管理库vue3在/src目录下新建store文件夹。在文件夹下面创建index.ts文件在index.ts内做三件事
1定义状态容器(仓库)
2修改容器中的state
3容器中的actions的使用
代码:

import { defineStore } from 'pinia'
    export const mianStore = defineStore('main', {
    state: ()=>{
        return {}
        },
    getters: {},
    actions: {}
})

defineStore参数说明:
defineStore()方法接收两个参数,第一个参数是id,相当于容器的名字,唯一标识,因为伴随着项目越来越大的问题,会有很多个仓库,所以为了便于管理给每个仓库使用id来区别。
defineStore()方法第二个参数是一个配置对象,里面存放的是store容器的配置,
state属性用来存放全局的状态。
getters属性用来监视计算状态的变化,具有缓存的功能。
actions属性用来修改全局的state状态数据。

最后修改:2022 年 02 月 24 日
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。