pinia

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:()=>({
        
    })
})

页面调用

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

页面使用

pinia:{{Test.current}}

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

2.使用$patch

3.$patch函数，处理逻辑，if判断

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

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()调用

从页面中传值

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包裹

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:{}
        }
    },
    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=>{
    return new Promise((reslove)=>{
        setTimeout(()=>{
            reslove({
                name:'123',
                current:100
            })
        },2000)
    })
}
export const useTestStore =defineStore(Names.TEST,{
    state:()=> {
        return{
            current:1,
            name:"111",
            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=>{
    return new Promise((reslove)=>{
        setTimeout(()=>{
            reslove({
                name:'123',
                current:100
            })
        },2000)
    })
}
export const useTestStore =defineStore(Names.TEST,{
    state:()=> {
        return{
            current:1,
            name:"111",
            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的值变化就会触发

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

3.$onAction ,只要调用actions就会调用,true是组件被销毁后还想监听

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

刷新数值不变

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");