定义pinia存储容器 /stores/piniause-demo.js
/**
* 定义并导出容器
* 参数1：容器ID，必须唯一
* 参数2：配置对象
*/
export const useDemoStore = defineStore('demo', {
//state：类似组件data，用于存储数据供全局调用
state: () => ({
count: 100,
name: 'Job',
likes: ['a', 'b', 'c'],
}),
//getters:类似组件computed，用于封装计算属性，有缓存功能
getters: {
// newCount(state) {
// return state.count + 10; //可以使用state(ts里最好使用state以用于类型推断)
// },
newCount() {
return this.count + 10; //也可以使用this
},
},
//actions：类似组件methods，用于封装业务逻辑，修改state里的数据
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' //引入API
/* -----初始化实例----- */
const demoStore = useDemoStore()
/* -----获取数据----- */
console.log(demoStore.count) //直接获取
const { count, name } = storeToRefs(demoStore) //解构获取（响应式），注：直接const {count,name} = demoStore会丢失响应
console.log(count, name)
/* -----修改数据----- */
//方式1：单个直接修改（不推荐）
demoStore.count = 200
//方式2：简单的：$patch方法-直接批量修改（注：此方式经测试，赋空值时不生效，建议用方式3）
demoStore.$patch({
count: 200,
name: 'Jack',
likes: [...demoStore.likes, 'd'],
})
//方式3：复杂一点的：$patch方法-函数批量修改
demoStore.$patch((state) => {
state.count = 200
state.name = 'Jack'
state.likes.push('d')
})
//方式4：再复杂一点的：封装到actions里做处理
demoStore.changeDatas(200, 'Jack', 'd') //可以定义动态参数
/* -----getters计算属性----- */
console.log(demoStore.newCount)
</script>
<style lang="less" scoped></style>
