Pinia的使用指南

本次博客主要讲解pinia的使用指南

创建一个根实例
<div class="about">
    <div class="store">
        <h1>在组件中你可以这样使用定义的Store</h1>
        <h2>FirstName:{{userStore.firstName}}</h2>
        <h2>LastName:{{userStore.lastName}}</h2>
        <h2>FullName:{{userStore.fullName}}</h2>
    </div>
</div>

一 : 什么是Pinia

        1: Pinia与Vuex一样,也是Vue的状态管理库,作为Vuex的代替者,pinia后来居上,已经成为了开发者首选的状态管理工具

        2: pinia的优势有哪些

                2.1: 同时支持Vue2和Vue3
                2.2: 简化了状态管理流程,pinia抛弃了Mutation,这意味着你可以直接更新状态,不用再注册Commit
       2.3: 提供了更好的TypeScript支持,语法上更加贴近Composition Api

二 : 如何使用

        1: 首先以一个新的Vue3项目为例,您可以通过npm init vue 命令,初始化一个项目,安装时关于Pinia选项选择Yes即可

        2: 在项目的src/stores目录下,新建一个index.ts文件作为Pinia的入口文件,并创建跟Store

        3: 在main.ts中引用使用即可

        4: 好处
            4.1: 保证main.ts里的代码整洁
            4.2: 后期可能会使用一些Pinia插件,将这部分内容写在一起有利于后期维护
            4.3: 符合模块化开发的思想

        在引用store之后,可以在src/stores目录下新建一个modules文件夹用于定义Store。这样我们的pinia就可以投入使用了

三 : 创建一个Store

         1: 我们在开发中需要根据模块划分状态,这样才方便我们统一管理不同模块下的状态,比如我们开发中会设计到用户模块,因此我们可以在src/stores/modules目录下新建一个user.ts文件用于用户状态管理,将 通过下列代码创建user Store

        2: 在大多数情况下,state都是你的store的核心,人们通常会先定义能代表他们APP的state,在Pinia中,state被定义为一个返回初始状态的函数.这使得Pinia可以同时支持服务端和客户端

        3: 使用方法 :定义的Store是个函数,在组件中需要调用后才能使用

        4: 写到这,pinia就写的差不多了,你就差不多能使用Pinia进行状态管理

<script>
    //总代码
    import useUserStore from '@/stores/modules/user'
    const userStore=useUserStore()
    // 二-1.2代码
    import { createPinia } from 'pinia'
    const store=createPinia()
    export default store
    // 二-1.3代码
    import store from './stores'
    app.use(store)
    // 三 代码演示
    import { defineStore } from 'pinia'
    interface IUserState{
        firstName:string
        lastName:string
    }
    const useUserStore=defineStore('user',{
        state:():IUserState=>({
            firstName:'Liu',
            lastName:'Dehua'
        }),
        getters:{
            fullName():string{
                return this.firstName + ' ' + this.lastName
            }
        }
    })
    export default useUserStore
    // 还有一种方式定义Store，就是以函数的形式。
    import { defineStore } from 'pinia'
    import { reactive,toRefs } from 'vue'
    interface IUserState{
        firstName:string
        lastName:string
    }
    const useUserStore=defineStore('user',()=>{
        const state=reactive<IUserState>({
            firstName:'li',
            lastName:'jianmin'
        })
        const fullName=():string=>state.firstName + ' ' + state.lastName
        return {
            ...toRefs(state),
            fullName
        }
    })
</script>