一、安装pinia

1. 安装：npm install pinia

2. 安装一个pinia的插件`pinia-plugin-persist`来支持pinia的状态持久化。
   npm i pinia-plugin-persist
   
3. 新建目录store/index.js
    引入并导出：
    import {createPinia} from 'pinia'
    import piniaPluginPersist from 'pinia-plugin-persist'

    const store = createPinia()
    store.use(piniaPluginPersist)

    export default store
4. 在main.js中引入
    import store from "@/store";
    
    const app = createApp(App)
    app.use(store)

二、使用pinia

1. 在vue模板中使用
    例如1：
        <script setup>
            import {useCategoryState} from "@/store/catepory";

            const categoryState = useCategoryState()
            console.log(categoryState.categoryList)  //使用变量状态
            categoryState.getCategoryList()          //使用方法
        </script>
        
        <template>
          <div class="main">
            <!-- 模板中使用 -->
            {{ categoryState.categoryList }}
          </div>
        </template>
        
     例如2：我们这里可以直接结构出想要的数据，但是数据会出现无法实现响应式问题，官方使用的API reactive 使state数据生成响应式。
        import {useCategoryState} from "@/store/catepory";
        import {storeToRefs} from "pinia";

        const {categoryList} = storeToRefs(useCategoryState())
        console.log(categoryList.value);
        
        注意：引用官方API storeToRef 作用就是把结构的数据使用ref做代理