https://pinia.web3doc.top/getting-started.html

安裝：

1.yarn add pinia 或
2.npm install pinia

引入（vue3）

import { createApp } from 'vue'
import App from './App.vue'
import store from './store'
let app = createApp(App)
 
 
app.use(store)
 
app.mount('#app')

初始化倉庫
1.新建文件夾Store
2.新建文件index.ts
3.index.ts中

import { defineStore } from 'pinia'
export const Test =defineStore()

4.Store中新建store-name.ts

export const enum Names{
   TEST ='TEST'
}

5.index.ts中導入枚舉

import { defineStore } from 'pinia'
import {Names} form './store-name'
export const useTestStore=defineStore(Names.TEST,{
  state:()=>{  
      return {
          current:1
       }
    },
//類似computed   
getters:{},
//類似methods 可以做同步，異步，提交state
actions:{}
})

或者

import { defineStore } from "pinia";


export const useStore =defineStore({
    id:'index',
    state:()=>({
        
    })
})

頁面調(diào)用

import {useTestStore} from './store'
const Test =useTestStore()

頁面使用

pinia:{{Test.current}}

state:修改state的值
1.直接操作

<template>
   <h1>app頁面</h1>
   <div>{{Test.current}}</div>
   <button @click="add">關閉</button>
   <hr>
</template>
<script setup lang="ts">
import {useTestStore } from "./Store";
const Test = useTestStore()
const add=()=>{
  Test.current++
}
</script>

2.使用$patch

<template>
   <h1>app頁面</h1>
   <div>{{Test.current}}</div>
   <button @click="add">關閉</button>
   <hr>
</template>
<script setup lang="ts">
import {useTestStore } from "./Store";
const Test = useTestStore()
const add=()=>{
  Test.$patch({
    current:888
  })
}
</script>

3.$patch函數(shù)，處理邏輯，if判斷

<template>
   <h1>app頁面</h1>
   <div>{{Test.current}}</div>
   <button @click="add">關閉</button>
   <hr>
</template>
<script setup lang="ts">
import {useTestStore } from "./Store";
const Test = useTestStore()
const add=()=>{
  Test.$patch((state)=>{
    state.current=333
  })
}
</script>

4.$state,缺陷是必須要修改全部

<template>
   <h1>app頁面</h1>
   <div>{{Test.current}}</div>
   <button @click="add">關閉</button>
   <hr>
</template>
<script setup lang="ts">
import {useTestStore } from "./Store";
const Test = useTestStore()
const add=()=>{
  Test.$state={
    current:2000,
    name:'2222'//如果有必須傳，不傳報錯
  }
}
</script>

5.使用actions
store中

import {defineStore} from 'pinia'
import {Names} from './store-name'
export const useTestStore =defineStore(Names.TEST,{
    state:()=> {
        return{
            current:1,
            name:"111"
        }
    },
    getters:{},
    actions:{
        setCurrent(){
            this.current=1243
        }
    }
})

app中,actions在頁面中使用需要Test.setCurrent()調(diào)用

<template>
   <h1>app頁面</h1>
   <div>{{Test.current}}</div>
   <button @click="add">關閉</button>
   <hr>
</template>
<script setup lang="ts">
import {useTestStore } from "./Store";
const Test = useTestStore()
const add=()=>{
  Test.setCurrent()
}
</script>

從頁面中傳值

<script setup lang="ts">
import {useTestStore } from "./Store";
const Test = useTestStore()
const add=()=>{
  Test.setCurrent(123)
}
</script>

store接收

import {defineStore} from 'pinia'
import {Names} from './store-name'
export const useTestStore =defineStore(Names.TEST,{
    state:()=> {
        return{
            current:1,
            name:"111"
        }
    },
    getters:{},
    actions:{
        setCurrent(num:number){
            this.current=num
        }
    }
})

state解構,因為pinia解構不具有響應式，需要使用storeToRefs包裹

<template>
   <h1>app頁面</h1>
   <div>{{Test.current}}</div>
   <div>{{current}}</div>
   <button @click="add">關閉</button>
   <hr>
</template>
<script setup lang="ts">
import {useTestStore } from "./Store";
import { storeToRefs } from "pinia";
const Test = useTestStore()
const {current,name}=storeToRefs(Test)
const add=()=>{
  current.value++//Test.current++

}
</script>

actions
1.直接賦值

import {defineStore} from 'pinia'
import {Names} from './store-name'


type User={
    name:string,
    current:number
}
let result:User ={
    name:'123',
    current:100
}
export const useTestStore =defineStore(Names.TEST,{
    state:()=> {
        return{
            current:1,
            name:"111",
            user:<User>{}
        }
    },
    getters:{},
    actions:{
        setCurrent(num:number){
            this.current=num
        },
        setUser(){
            this.user=result
        }
    }
})

2.異步請求

import {defineStore} from 'pinia'
import {Names} from './store-name'


type User={
    name:string,
    current:number
}
const Login =():Promise<User>=>{
    return new Promise((reslove)=>{
        setTimeout(()=>{
            reslove({
                name:'123',
                current:100
            })
        },2000)
    })
}
export const useTestStore =defineStore(Names.TEST,{
    state:()=> {
        return{
            current:1,
            name:"111",
            user:<User>{}
        }
    },
    getters:{},
    actions:{
        setCurrent(num:number){
            this.current=num
        },
      async  setUser(){
            const result = await Login()
            this.user = result
        }
    }
})

getters

import {defineStore} from 'pinia'
import {Names} from './store-name'


type User={
    name:string,
    current:number
}
const Login =():Promise<User>=>{
    return new Promise((reslove)=>{
        setTimeout(()=>{
            reslove({
                name:'123',
                current:100
            })
        },2000)
    })
}
export const useTestStore =defineStore(Names.TEST,{
    state:()=> {
        return{
            current:1,
            name:"111",
            user:<User>{},
            age:2
        }
    },
    getters:{
        setAge():string{
            return `$-${this.age}-${this.getName}`
        },
        getName():string{
            return this.name
        }
    },
    actions:{
        setCurrent(num:number){
            this.current=num
           
        },
      async  setUser(){
            const result = await Login()
            this.user = result
            this.setage(3)
        },
        setage(age:number){
            this.age=age
        }
    }
})

pinia的API
1.$reset()恢復初始值

const reset =()=>{
  Test.$reset()
}

2.$subscribe,只要state的值變化就會觸發(fā)

Test.$subscribe((args,state)=>{
  console.log(args);
  console.log(state);
  },{
detached:true,
deep:true,
flush:'post'
})

3.$onAction ,只要調(diào)用actions就會調(diào)用,true是組件被銷毀后還想監(jiān)聽

Test.$onAction((args)=>{
args.after(()=>{})
  console.log(args);
  
},true)

刷新數(shù)值不變

import { createApp, toRaw } from "vue";
import "./style.css";
import App from "./App.vue";
import ElementPlus from "element-plus";
import mitt from "mitt";
import "element-plus/dist/index.css";
import "./assets/css/reset.css";
import { createPinia, PiniaPluginContext } from "pinia";
const Mit = mitt();
const store = createPinia();
declare module "vue" {
  export interface ComponentCustomProperties {
    $Bus: typeof Mit;
  }
}
type Options={
    key:string
}
const _default_:string = 'pinia'
const setStorage=((key:string,value:any)=>{
    localStorage.setItem(key,JSON.stringify(value))
})
const getStorage =((key:string)=>{
  return  localStorage.getItem(key)?JSON.parse(localStorage.getItem(key) as string) :{}
})
const piniaPlugin=(options:Options)=>{
    return (context:PiniaPluginContext)=>{
        const {store} = context
        const data = getStorage(`${options.key ?? _default_ }-${store.$id}`)
        store.$subscribe(()=>{
            setStorage(`${options.key ?? _default_ }-${store.$id}`,toRaw(store.$state))
        })
        return {
            ...data
        }
}

}
store.use(piniaPlugin({
    key:'pinia'
}))
const app = createApp(App);
app.config.globalProperties.$Bus = Mit;
app.use(ElementPlus);
app.use(store);
app.mount("#app");