//定义一个名为 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 可以是异步的