pinia的基本使用

store 持有未绑定到您的组件树的状态和业务逻辑

1. 托管“全局”状态
2. state 数据 ==> data
3. getters 计算 ==>computed
4. actions 方法 ==>methods

定义 defineStore

1. 需要一个唯一的名称
2. store是一个reactive包裹的对象，不能对其进行结构
3. 使用storeToRefs提取其属性，保持响应性

const useStore=defineStore('main',{
   
})

state 返回初始状态的函数

interface CounterState {
    counter: number
    name: string
    item: string[]
  }
  
const useStore=defineStore('main',{
     state:(): CounterState=>({
        counter:0,
        name:"qqq",
        item:["ssss]
    })
})
const store=useStore()
console.log(store.counter)

$reset() 重置到其初始值

store.$reset()

使用computed 获取store值

const counterStore=computed(()=>store.counter*3)

$patch 修改多个属性

store.$patch({
    counter:store.counter+1,
    name:"22"
})
store.$patch((state)=>{
    state.item.push('222')
})

$state 替换state相当于初始化

store.$state={name:"",item:[],counter:0}

getters store状态的计算值

• 使用this，必须定义函数返回值类型

const countStore=defineStore('counter',{
    state:()=>({
        counter:0,
        users:[{id:0,name:"sss"}]
    }),
    getters:{
        doubleCount:(state)=>state.counter*2,
        doublePluusOne():number{
            return this.counter*2+1
        },
        doubleCountPlusOne():number{
            return  this.doubleCount+1
        },
        getUserId:(state)=>{
            return (userId:number)=>state.users.find((users)=>users.id===userId)
        }
    }
})
const counter=countStore()
console.log(counter.doubleCount)
const getUserByIds=counter.getUserById
console.log(getUserById(2))

actions 相当于组件的methods

• 非常适合定义业务逻辑

const userStore=defineStore('user',{
    state:()=>({
        counter:0,
        userData:{} as {name:string;password:string}
    }),
    actions:{
        increment(){
            this.counter++
        },
        randomizeCounter(){
            this.counter=Math.round(100*Math.random())
        },
        async registerUser(name:string,password:string){
            this.userData={
                name,
                password
            }
        }
    }
})
const users=userStore()
users.registerUser("","")