vuex5 Pinia状态管理

1、配置
	import { createPinia } from 'pinia'

	app.use(createPinia())

2、基本使用
	(1)创建store
		.导出命名通过use开头
		
		import { defineStore } from 'pinia'
		
		方式一：通过之前vuex的配置项格式以及mapState等辅助函数的使用
			const useCounterStore = defineStore('counter', {
			  state: () => ({ count: 0 }),
			  getters: {
			    double: (state) => state.count * 2,
			  },
			  actions: {
			    increment() {
			      this.count++
			    }
			  }
			})
			
			组件中：
				export default {
				  computed: {
				    ...mapStores(useCounterStore, useUserStore)
				    ...mapState(useCounterStore, ['count', 'double']),
				  },
				  methods: {
				    ...mapActions(useCounterStore, ['increment']),
				  },
				}
	
		方式二：通过函数形式
			export const useCounterStore = defineStore('counter', () => {
			  const count = ref(0)
			  function increment() {
			    count.value++
			  }
			
			  return { count, increment }
			})
	
	(2)store使用
		.导入定义的store
		.不要对导入的store的state进行解构赋值，否则会丢失其响应性
		.actions可以直接进行解构
		
		import { storeToRefs } from 'pinia'
		
		export default defineComponent({
		  setup() {
		    const store = useStore()
			
			不能使用解构赋值state，否则会丢失响应性
		    const { name, doubleCount } = store
			
			通过storeToRefs进行解构，不会丢失响应性
			const { name, doubleCount } = storeToRefs(store)
			
			可以直接进行解构actions
			const { increment } = store
					
		    return {
		      doubleValue: computed(() => store.doubleCount),
		    }
		  },
		})
	
	(3)state使用
		(1)改变state
			方式一：
				store.counter++
			
			方式二：
				选项式通过：mapState、mapWritableState辅助函数
			
			方式三：通过$patch
				(1)通过patch一个对象
					.对于数组的push操作等，需要重新返回一个新对象
					
					store.$patch({
					  counter: store.counter + 1,
					  name: 'Abalam',
					})
					
				(2)通过patch一个方法
					.对于这种方式数组的push操作等直接在原对象操作即可
					
					store.$patch((state) => {
					  state.items.push({ name: 'shoes', quantity: 1 })
					  state.hasChanged = true
					})
				
		
		(2)恢复、替换state
			恢复state为初始化状态
				store.$reset()					
				
			替换整个state
				store.$state = { counter: 666, name: 'Paimon' }	
				pinia.state.value = {}; SSR使用
		
		(3)监听state修改
			
			方式一：
				.相比watch监听更能够追溯状态
				
				store.$subscribe((mutation, state) => {
					mutation：
					  修改方式
					  	mutation.type 	'direct' | 'patch object' | 'patch function'
					  
					  修改的store名称
					  	mutation.storeId
					  
					  patch的对象,只有当patch一个对象时才会有
					 	mutation.payload

				},{
					detached: true	监听器不会在组件卸载时移除,默认会
				})
		
			方式二：
				watch(
				  pinia.state,
				  (state) => {
				  	...
				  },
				  { deep: true }
				)