Pinia 是一个用于 Vue.js 的状态管理库，是 Vue 的存储库，它允许您跨组件提供了更简单、直观的 API，适用于管理和共享应用程序的状态,
Pinia 和 Vuex 都是流行的 Vue.js 状态管理库，它们都有自己的优点和适用场景。下面是对 Pinia 和 Vuex 的简要比较：
-
方便性：在方便性方面，Pinia 提供了一种像 Vuex 一样的状态管理模式，但使用了 Vue 3 的 Composition API。与 Vuex 相比，Pinia 提供了更简单、直观的 API，不需要像 Vuex 那样定义 mutations 和 actions。相比之下，Vuex 在辅助函数 (helper functions) 方面更为成熟和丰富。
-
性能和性能优化：由于 Pinia 基于 Vue 3 的响应式系统，它具有与 Vue 3 相同的性能优势。Pinia 使用了静态提升 (static injection) 来提高类型推导和性能。而 Vuex 则是基于 Vue 2，因此在某些情况下可能会稍微慢一些。
-
稳定性和生态系统：Vuex 是一个成熟的状态管理库，在 Vue 生态系统中非常受欢迎，拥有大量的插件和工具支持。相比之下，Pinia 是一个相对较新的库，同时也在快速发展中。尽管 Pinia 社区相对较小，但已经积累了一些很棒的插件和工具。
在网上百度了很多，都说要安装，uniapp内置了pinia直接使用即可，对初学者来说，百度一大堆，误导啊，浪费半天。在VSCODE中需要用安装,手动安装，命令行下：npm install pinia。
在uniapp官方也有详细介绍，但我觉得有点复杂，代码理还是大，自己理解后结合别人写的精简了一下，方便理解其用法！
uniapp介绍的网址 https://uniapp.dcloud.net.cn/tutorial/vue3-pinia.html
第一步：在 main.js 中引入插件：
import { createSSRApp } from 'vue';
import * as Pinia from 'pinia'; //（使用 * as Pinia 语法），导出Pinia库的所有成员
export function createApp() {
const app = createSSRApp(App);
app.use(Pinia.createPinia()); // 使用 Pinia 的 createPinia 方法创建一个 Pinia 实例
return {
app,
Pinia, // 此处必须将 Pinia 返回
};
}
第二步：编写共享状态代码
新建一个store的目录，再新建一个store.js文件，用于管理应用程序中用户相关的状态，store目录上的状态文件可以为多个。
import { defineStore } from 'pinia' //引入pinia
/*
state 和 actions 是 Pinia 内置的结构方法，用于定义 store 中的数据和操作这些内置方法由 Pinia 提供，并且符合 Vue 3.x 的 Composition API 规范。
通过使用这些内置方法，您可以方便地定义 store 中的数据和操作，使其具备响应式能力，并在组件中进行访问和修改。在上述示例中，state 和 actions 是
Pinia 内部用来创建 store 实例并管理其状态的重要部分。
incrementAge 函数没有返回值是因为它是一个操作方法，用于更新 store 中的数据，而不需要返回任何结果。 在 Pinia 中，操作方法主要用于修改 store 中的 state 数据。
这些方法可以执行各种操作，例如增加/减少数值、更新对象属性、发送网络请求等等。由于这些方法的主要目的是修改数据，并不需要返回值，因此可以省略返回语句
*/
export const useUserStore = defineStore('user', {
state: () => ({ //函数返回了 store 中的响应式数据对象
name: 'John Doe', //自定义对像数据变量
age: 30, //自定义对像数据变量
}),
actions: { //对象包含了 store 中的各种操作方法
incrementAge() { //函数没有返回值是因为它是一个操作方法，用于更新 store 中的数据，而不需要返回任何结果
this.age++
},
},
})
//如果需要从操作方法中获取返回值，可以在方法中添加返回语句来实现
/*
actions: {
incrementAge() {
this.age++;
return this.age; // 返回增加后的 age 值
},
},
*/
第三步：页面调用
/*
setup() 是 Vue 3 中的一个内置函数，在使用 Composition API 时常用到。它主要用于设置组件的响应式数据和操作。在 Vue 3 中，使用 Composition API 可以使用
setup() 函数来替代之前的 data、computed、methods 等选项。setup() 函数会在组件实例被创建之前执行，并且可以访问到一些特殊的上下文对象，例如 props、attrs、slots 等。
setup() 函数被用来创建 user 和 incrementAge 两个响应式数据，并将其作为返回值导出。这样做的目的是为了能够在模板中直接使用这些数据和方法。
在 setup() 函数中，通过调用 useUserStore() 函数来创建 user 对象，该对象是一个包含了响应式数据和操作的 store 实例。同时，还定义了 incrementAge 方法，该方法调用了 user 对象中的 incrementAge 方法。
总结来说，setup() 函数在 Vue 3 的 Composition API 中扮演着设置组件响应式数据和操作的角色，您可以在其中创建并返回需要在模板中使用的数据和方法
*/
<template>
<view class="content">
<view>
<p>Name: {{ user.name }}</p> //获取状态管理中的数据并将其进行渲染（明明就是显示show，改叫渲染）
<p>Age: {{ user.age }}</p> //获取状态管理中的数据并将其进行渲染
<button @click="incrementAge">Increment Age</button> //调用状态管理中的方法，修改其值,因为是全局的，界面也会随之变化
</view>
</view>
</template>
<script>
import {useUserStore} from '../../store/store.js' //调用时，引入对应的状态管理文件，将其实例化为useUserStore
export default {
data() {
return {
title: 'Demo'
}
},
methods: {
}
},
setup() {
const user = useUserStore()
const incrementAge = () => user.incrementAge()
return {
user,
incrementAge
}
},
}
</script>
运行效果：
成功获取数据和修改数据，网上很多写的太过复杂不利于菜鸟理解（我也是学习中的菜鸟）。
总结：1.从 main.js中引入 Pinia，引入时注意语句规范 2. 新建一个状态管理文件 3.在需要的页面引入相关的状态管理文件并实例化
