pinia使用

//定义一个名为 loginStore 的store
export const useLoginStore = defineStore('loginStore', {
    state: ()=> {
        return {
            logined: false,
        }
    },
    getters: {
        isLogined: state => state.logined,
    },
    actions: {
        changeLoginStatus(logined: boolean){
            this.logined = logined;
            if(!logined){
                this.authInfo = null;
            }
        }
    }
})

//页面拿到名为 useCounterStore 的store
    const counter = useCounterStore()
    //这边是直接在引用页面修改
    counter.$patch({ count: counter.count + 1 })
    //or
    counter.$patch((state) => {
       counter.count ++
    })
  
    //这边是在store中定义action方法，然后在页面中调用
    counter.increment()

数据响应式写法

doubleValue: computed(() => store.doubleCount),

当仅想要从store中提取响应式属性但是并不会调用任何操作时，可以用 storeToRefs

import { storeToRefs } from 'pinia'

const mainStore = useMainStore()
const { showCenter } = storeToRefs(mainStore)

重置数据

store.$reset()

通过给getter返回一个函数来传递参数（这种情况下getter不会缓存）

//store 中
export const useStore = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

页面使用

const store = useStore()
return { getUserById: store.getUserById }

如果想缓存，可以在getter内部函数中缓存，这种情况下不多见，但是性能应该更高

getActiveUserById(state) {
    const activeUsers = state.users.filter((user) => user.active)
    return (userId) => activeUsers.find((user) => user.id === userId)
},

可以在getter内部使用其他store中的数据

actions 可以是异步的