// 用 pinia 的 defineStore()方法,来创建一个store
import { defineStore } from "pinia"
/**
* 如何创建store:
调用pinia的defineStore()函数即可,该函数接收两个参数:
name:一个字符串,必传,该store的唯一id
options:一个对象,store的配置项,比如配置store内的数据,修改数据的方法等等
* pinia的优点:
我们可以定义任意数量的store,因为其实一个store就是一个函数,这也是pinia的好处之一,让我们的代码扁平化了,这和Vue3的实现思想是一样的。
*/
// 第一个参数是应用程序中 store 的唯一 id
export const useUsersStore = defineStore('users', {
// 添加state,state接收的是一个箭头函数返回的值,state不能接收一个对象
state: () => {
return {
name: '梨花',
age: 25,
sex: '男'
}
},
/*
添加getters,接收一个对象,该对象里面是各种方法,
你可以把它想象成Vue中的计算属性,它的作用就是返回一个结果,
getters也是会被缓存的,
在getters中的,各个方法之间相互调用采用this关键字即可
*/
getters: {
// 定义一个getAddAge()方法,该方法默认接收一个state参数(即:上面的那个state)
getAddAge: (state) => {
return state.age + 1
},
/*
* 调用其他getters中的方法(在getter中如何使用this)
一般情况下,getter仅仅依赖于state,但是有时候也会依赖其他getter,
所以呢,如果getter定义为【非箭头函数】,就可以【通过this拿到整个store实例】
因为,箭头函数没有自己的this绑定,而是继承了外部的this绑定,所以箭头函数中无法使用this
*/
getNameAge(state) {
console.log('getters中的this=', this)
return state.name + this.getAddAge
},
/*
getter可以通过,返回一个函数xxx来接收参数,这个函数xxx的返回值也就是此getter最终的值
在执行此操作时,getter 不再缓存,它们只是调用的函数
*/
plusAgeBy: (state) => {
return (moreNum) => {
console.log('传递给getter的参数是=', moreNum)
return state.age + moreNum
}
}
},
/*
添加actions,属性值是一个对象,该对象里面是各种方法,包括同步、异步方法
特殊之处:actions中的方法内部的this指向的是当前store,即:
在`defineStore`中,state对象中的属性,会被绑定到this上,可以通过this.name来访问和修改name属性,
这里state对象中定义了name、age、sex属性,因此可以通过this.name、this.age、this.sex 来访问和修改这些属性
*/
actions: {
saveName(name){
this.name = name
}
}
})
pinia中的state、getters、actions的用法
最新推荐文章于 2024-04-29 08:45:10 发布