定义pinia存储容器 /stores/piniause-demo.js
export const useDemoStore = defineStore('demo', {
state: () => ({
count: 100,
name: 'Job',
likes: ['a', 'b', 'c'],
}),
getters: {
newCount() {
return this.count + 10;
},
},
actions: {
changeDatas(value1, value2, value3) {
this.count = value1;
this.name = value2;
this.likes.push(value3);
},
},
});
使用pinia存储数据 /pages/piniause-demo.vue
<template>
<div>{{ demoStore.count }}</div>
</template>
<script setup>
import { useDemoStore } from '~/stores/piniause-demo.js'
import { storeToRefs } from 'pinia'
const demoStore = useDemoStore()
console.log(demoStore.count)
const { count, name } = storeToRefs(demoStore)
console.log(count, name)
demoStore.count = 200
demoStore.$patch({
count: 200,
name: 'Jack',
likes: [...demoStore.likes, 'd'],
})
demoStore.$patch((state) => {
state.count = 200
state.name = 'Jack'
state.likes.push('d')
})
demoStore.changeDatas(200, 'Jack', 'd')
console.log(demoStore.newCount)
</script>
<style lang="less" scoped></style>
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步