Vue3中Pinia的介绍及使用

一、Pinia

1、介绍

    1、介绍
        Pinia是Vue最新的状态管理工具，是Vuex的替代品
    2、变化
        2.1、去掉了modules和mutation，每一个store都是一个独立的模块
        2.2、actions即可提供异步，又可提供同步，且可直接修改state数据
        2.3、提供更加符合、组合式风格的API

        

2、使用

1、安装
        1.1、npm create vue@latest | 创建一个空的Vue3项目
        1.2、yarn add pinia 或 npm install pinia | 安装pinia
        1.3、在main.js中导入pinia
            import { createApp } from 'vue'
            import { createPinia } from 'pinia'
            import App from './App.vue'
            
            const pinia = createPinia()
            const app = createApp(App)
            
            app.use(pinia)
            app.mount('#app')    
            
    2、使用
        2.1、定义Store
            2.1.1、在src下创建store文件夹，用于存放模块
            2.1.2、在模块中导入defineStore
            2.1.3、示范
                //@/store/counter.js
                import { defineStore } from "pinia";
                import { ref } from "vue";
                
                // 定义store
                // defineStore(仓库唯一标识 ,() => {...})
                //定义变量名，以便于调用
                //export用于导出
                export const useCounterStore = defineStore('counter',() =>{
                
                    //声明数据 state - count
                    const count = ref(0)
    
                    //声明操作数据的方法 action (普通函数)
                    const addCount = () => count.value++
                    const downCount = () => count.value--
                
                    //声明基于数据派生的计算属性 getters (computed)
                    const double = computed(() => count.value * 2)
                
                    return {
                        count
                    }
                })

                

3、仓库解构

  1、问题
        当仓库导入时想要以解构直接获取数据，会导致响应式丢失
        
    2、原因
        因为解构的赋值，相当于创建了一个新的属性，并给其赋值，所以会丢失响应性
        
    3、解决方法
        使用 storeToRefs(仓库)
        如：const {name, Count} = storeToRefs(store)
    
    4、注
        只有属性需要使用storeToRefs，方法则不需要

      

4、Pinia持久化
https://prazdevs.github.io/pinia-plugin-persistedstate/

  1、使用流程
        1.1、安装插件pinia-plugin-persistedstate
            npm i pinia-plugin-persistedstate
                或
            yarn add pinia-plugin-persistedstate
            
        1.2、将插件添加到pinia实例上
            main.js
            
                import { createPinia } from 'pinia'
                import piniaPluginPersistedstate from 'pinia-plugin-persistedstate'
                
                const pinia = createPinia()
                pinia.use(piniaPluginPersistedstate)
                
        1.3、用法
            创建Store时，将persist选项设置为true
            如：
            export const useCounterStore = defineStore('counter',() =>{
                const changeList = ref([])
                return {
                    changeList,
                }
            },{
                persist:true 
                //开启模块的持久化
            })
    
    2、配置
        2.1、默认配置
            · 使用 localStorage 进行存储
            · store.$id 作为 storage 默认的 key
            · 使用 JSON.stringifyJSON.parse 进行序列化/反序列化
            · 整个 state 默认将被持久化
            
        2.2、修改默认配置
            //若想修改默认配置，可以将一个对象传递给STore的persist属性来配置持久化
            如：
                import { defineStore } from 'pinia'
                
                export const useStore = defineStore('main', {
                  state: () => ({
                    someState: '你好 pinia',
                  }),
                  persist: {
                    // 在这里进行自定义配置
                  },
                })        
        2.3、配置项解析
            2.3.1、key
                   //用于指定key
                   type：string
                   default:store.$id
                   //使用方式
                   key:'my-key'
                   
            2.3.2、paths
                   //用于指定需要持久化的数据
                   type:string[]
                   default:undefined
                   //使用方式
                   paths:['count','save.me']