作为vue3中极力推荐的状态管理工具Pinia, 做一些总结吧, 个人感觉在使用上跟之前的vuex差不多, 就具体看看吧

安装和基本配置

//安装
    npm install pinia@next
    或者
    yarn add pinia@next
    
    
//2. 在main.ts配置
    import { createApp } from 'vue'
    import App from './App.vue'
    import {createPinia} from "pinia"

    const app = createApp(App)
    app.use(createPinia())

    app.mount('#app')

基本使用

//1. 在/store中创建xxx.ts文件
    import { defineStore } from "pinia"
    export const useMainStore = defineStore("main", {
        //声明state
        state: () => ({
            name: "lisi"
        }),
        
        getters:{...},
        actions:{...},
    })


//2. 在组件中引入, 并使用store
<script setup lang="ts">
  //1. 使用方式1
  //引入----
  import { storeToRefs } from "pinia"
  import { useMainStore } from "./stores/main.ts"	    
  const store = useMainStore()
  
  const {name} = storeToRefs( useMainStore() )	//得到响应式数据
  
  let { updateName } = useMainStore()	        //导出action中的方法
  updateName("王五")	                        //使用方法
             
             
  //使用方式2: 不要进行解构,解构后不是响应式
  import main from "./stores/main.ts"
  main.name		//可以直接获取
  main.addNum()		//可以直接触发方法
             
             
  
</script>

定义和访问state

//1. 在src/stores/xxx.js文件, 在文件中声明store
import { defineStore } from "pinia"
//可创建多个defineStore, 并导出
export const useMainStore = defineStore("main", {  //参数1: 一个唯一名称
	//声明方式1
	state: () => ({
		name: "lisi"
	})
	//声明方式2: 官网推荐
	state:()=>{
		return {name:"李四"}
	}
})


//2. 使用
<script setup lang="ts">
  import { useMainStore } from "./stores/main.js"	
  import { storeToRefs } from "pinia"
  const { name } = storeToRefs( useMainStore() )	//得到响应式数据
</script>
<template>
  <h1>{{ name }}</h1>
</template>

使用action

//actions 相当于组件中的methods,  可以处理同步任务和异步任务

import { defineStore } from "pinia"
export const useMainStore = defineStore("main", {
	//声明state
	state: () => ({
		count: 45
	})
        actions:{
            addCount(num){				
                    return this.count+=num;		//这里加定时器来做异步, 也是可以的
            },
        }
})



//使用
<script setup lang="ts">
  import {useMainStore} from "./stores/main.js"	
  import {storeToRefs} from "pinia"
  
  const { count } = storeToRefs(useMainStore())	   //得到响应式数据
  const { addCount } = useMainStore()              //导出action中的方法
</script>
<template>
  <h1>{{count}}</h1> 				//45
  <button @click='addCount(5)'>按钮</button>    //点击一下, count的值会增加5
</template>

使用getters

//1. 在src/stores/main.js文件中定义
import { defineStore } from "pinia"
import { useOtherStore } from "./other"			//其他文件的store------
export const useMainStore = defineStore("main", {
	//声明state
	state: () => ({
            count: 45
	})
        getters:{                                       //使用getters
            doubleCount(state){	
                return state.count * 2
            },
            doubleCountPlus(state){			//给上面的getters + 1
                return this.doubleCount + 1
            },
            doubleCountPlusProp(state){			//当有传递参数时
                return (num)=>{
                    return this.doubleCount + num
                }
            }
            getOthergetters(state){			//获取其他store的getters
                const store = useOtherStore()
                return state.count+store.otherGetters 
            }
        }
})

//2. 在组件中取出并使用
<script setup lang="ts">
  import {useMainStore} from "./stores/main.js"	
  import {storeToRefs} from "pinia"

  //得到响应式数据
  const {count,
         doubleCount,
         doubleCountPlus,
         doubleCountPlusProp,
         getOthergetters
        } = storeToRefs(useMainStore())	
  
</script>

<template>
  <h1>{{count}}--{{doubleCount}}--{{doubleCountPlus}}</h1> 	//45  90  91
</template>