pinia状态管理

官方文档：pinia.vuejs.org/

中文文档：pinia.web3doc.top/

项目中引入

1.创建项目结构时选中pinia

2.创建项目后手动安装

    npm install pinia —save

    创建store仓库

    加载store

    组件中使用

State

1.返回初始状态的函数

    1.组合式API setup（）钩子不需要额外的map辅助函数

    2.选项式API 使用computed/methods…等属性时可以用mapState()将状态映射为只读计算属性

2.修改状态 store.counter++

Getters

等同store状态的计算值

Actions

1.相当于组件中的methods,适合定义业务逻辑。可使用defineStore()中的actions属性

2.可以是异步的！！！

storeToRefs()

直接从pinia解构数据，会丢失响应式，可用storeToRefs()解决

热更新（调试用）

pinia 支持热模块替换，因此你可以编辑store，并直接在应用程序中与它们交互，无需重新加载页面，允许保持现有的状态，添加，甚至删除state，action和getter

本地存储持久化插件

npm install —save pinia-plugin-persist 
//pinia无法持久化，在浏览器刷新重置后会全恢复默认，需使用插件实现本地持久化存储

1.引入持久化插件
    import { createApp } from 'vue' 
    import App from './App.vue'
    import { createPinia } from "pinia" 
    import piniaPersist from 'pinia-plugin- persist'
    
    const pinia = createPinia()
    pinia.use(piniaPersist)
    
    createApp(App).use(pinia).mount('#app')
2.使用持久化插件
    import { defineStore } from "pinia" 
    export const useCountStore = defineStore("count", {     
        state: () => {         
            return {             
                count: 10         
                    }     
          },     
        persist: {         
            enabled: true,         
            strategies: [{                 
                key: 'counts',  //自定义 Key值 
                storage: localStorage,  // 选择存储方式 
                        }],     
             } 
         })