Vue3学习日记 Day3 —— 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']