Vue3：状态管理（pinia）

1. 简介

Pinia是专门为Vue 3开发的状态管理库，它是Vuex的升级版，提供了一种简单、直观且可扩展的方式来组织和访问应用程序的状态。Pinia充分利用了Vue 3的响应性系统和Composition API，使得状态管理更加高效和灵活。

Pinia的主要特点包括：

1. **类Vuex的API**：Pinia的API设计灵感来自于Vuex，因此对于熟悉Vuex的开发人员来说，使用Pinia应该会感到非常熟悉。
2. **存储库（Stores）**：Pinia将应用程序的状态组织为存储库的形式。每个存储库代表一个特定的数据领域或功能，包含状态（state）、动作（actions）、获取器（getters）等。
3. **响应式状态管理**：Pinia使用Vue 3的响应性系统，确保状态的变化能够自动追踪和响应，从而实现了高效的状态管理。
4. **插件系统**：Pinia提供了插件系统，用于扩展和增强其功能。
5. **模块化状态**：支持将状态划分为不同的模块，提高代码的可维护性和可扩展性。
6. **状态订阅**：允许你订阅状态的变化，并在状态发生变化时触发相应的回调函数。
7. **缓存和持久化**：支持缓存状态数据，以提高性能。同时，也支持将状态数据持久化到本地存储或后端数据库中。
8. **与Vue.js生态系统无缝集成**：与Vue.js的其他工具和库配合良好，可以轻松地与Vuex、Vue Router等一起使用。

Pinia的核心概念是“存储库”，它是一个类似于Vuex中的“Store”的概念，是一个单一的状态树，包含应用程序中的所有状态和数据。存储库可以定义为一个JavaScript类，并且可以具有状态、getter、setter、action等方法。存储库可以通过注入到组件中来使用，这使得组件可以访问存储库中的状态和数据。

总的来说，Pinia提供了一种简洁明了的方式来处理Vue.js应用程序中的数据，简化了状态管理的工作流程，并提高了应用程序的可维护性和可扩展性。

2. 实列化语法

/**

 * pinia：类似应用域，里面的数据可同时被多个.vue文件所共享

 * store：定义共享包装类

 * store中的四个属性：

 *  1.id：类似于Java中的类名，唯一的标识符

 *  2.state：类似于Java类中的属性，即定义该共享包装类有什么类型的数据，定义时需使用函数进行定义数据并返回

 *  3.getters：类似于Java中get返回数据的方法，即获取该包装类中的数据

 *  4.actions：类似于Java中set设置数据的方法，即设置该包装类中的数据

 */

 3. 基本用法

创建一个store.js

import { defineStore } from 'pinia'

//导入定义pinia对象的函数
export {defineStore} from 'pinia'

//创建pinia实列化对象，并对外暴露
export let definePeople = defineStore({
    id:"peoplePinia", //id必须唯一
    state:() => {
        //定义该类有什么类型的数据
        return {
            name:"张三",
            age:1,
            hobbies:["sing", "dance"]
        }
    },
    getters:{
        //定义该类有什么获取数据的方法，类似于Java中的类get返回数据方法
        getName(){
            return this.name
        },
        getAge() {
            return this.age
        },
        getHobby() {
            return this.hobbies
        }
    },
    actions:{
        //定义该类有什么修改数据的方法，类似于Java中类set设置数据的方法
        doubleAge() {
            this.age = this.age * 2
        }
    }
})

 展示数据页组件

<script setup>
import { definePeople } from '../stores/store';

let people = definePeople()
</script>

<template>
  <div>
    <h1>List</h1>
    <!--类的属性和获取数据的方法都可直接通过.属性名的方法获取-->
    name:{{ people.name }} <br>
    <!--此时类中获取数据的方法可充当属性直接.获取。而类设置的方法需通过调用API-->
    age :{{ people.getAge }} <br>
    hobbies:{{ people.hobbies }}
  </div>
</template>

<style scoped>

</style>

操作数据页组件

<script setup>
import {ref} from 'vue'
import {definePeople} from '../stores/store'

let people = definePeople()
</script>

<template>
  <div>
    <h1>Operation</h1>
    name:<input type="text" v-model="people.name"> <br>
    age :<button @click="people.doubleAge()">doubleAge</button> <br>
    hobby:
      篮球<input type="checkbox" name="hobby" value="篮球" v-model="people.hobbies">
      游泳<input type="checkbox" name="hobby" value="游泳" v-model="people.hobbies">
      唱歌<input type="checkbox" name="hobby" value="sing" v-model="people.hobbies">
      跳舞<input type="checkbox" name="hobby" value="dance" v-model="people.hobbies">

    <hr>
    {{ people }}
  </div>
</template>

<style scoped>

</style>

 router.js配置文件

import {createRouter, createWebHashHistory} from 'vue-router'
import List from '../components/List.vue'
import Operation from '../components/Operation.vue'

//创建router路由管理器对象
const router = createRouter({
    //设置路由器中的管理路径
    history:createWebHashHistory(),
    routes:[
        {
            path:'/list',
            component:List
        },
        {
            path:'/operation',
            component:Operation
        }
    ]
})

//对外暴露路由器
export default router

 main.js文件

import { createApp } from 'vue'
import App from './App.vue'
import {createPinia} from 'pinia'
import router from './routers/router'

//创建pinia对象
let pinia = createPinia()

const app = createApp(App)
//设置pinia全局可用
app.use(router)
app.use(pinia)
app.mount('#app')