uniapp中的持久化，状态管理 Pinia

Pinia 是一个用于 Vue.js 的状态管理库，是 Vue 的存储库，它允许您跨组件提供了更简单、直观的 API，适用于管理和共享应用程序的状态,

Pinia 和 Vuex 都是流行的 Vue.js 状态管理库，它们都有自己的优点和适用场景。下面是对 Pinia 和 Vuex 的简要比较：

1. 方便性：在方便性方面，Pinia 提供了一种像 Vuex 一样的状态管理模式，但使用了 Vue 3 的 Composition API。与 Vuex 相比，Pinia 提供了更简单、直观的 API，不需要像 Vuex 那样定义 mutations 和 actions。相比之下，Vuex 在辅助函数 (helper functions) 方面更为成熟和丰富。

2. 性能和性能优化：由于 Pinia 基于 Vue 3 的响应式系统，它具有与 Vue 3 相同的性能优势。Pinia 使用了静态提升 (static injection) 来提高类型推导和性能。而 Vuex 则是基于 Vue 2，因此在某些情况下可能会稍微慢一些。

3. 稳定性和生态系统：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.在需要的页面引入相关的状态管理文件并实例化