pinia中的state、getters、actions的用法

// 用 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
    }
  }
})

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
pinia的getters是用于在pinia容器定义计算属性的方法。在pinia容器的getters,您可以通过访问容器的state来定义各种计算属性。通过getters,您可以对容器的state进行处理和转换,并根据需要返回结果。这些getters可以在组件使用,并且它们会根据state的变化自动更新。 在pinia的getters,您可以定义多个计算属性,并且可以访问其他的getters或actions。您还可以返回一个函数来接受参数,并在函数state进行处理。需要注意的是,当您返回一个函数时,getter将不再被缓存,每次调用都会执行函数。 下面是一个使用pinia的getters的示例代码: ```javascript import { defineStore } from 'pinia' const useMainStore = defineStore('main', { state: () => { return { message1: 'Hello', message2: 'Pinia', count: 1, number: 666 } }, getters: { // 定义的计算属性,可以访问state并返回结果 computedProperty(state) { return state.count * state.number }, // 定义的计算属性,接受参数并返回结果 computedFunction: (state) => (param) => { return state.count + param } }, actions: { // 定义的action // ... } }) export { useMainStore } ``` 以上代码示例,我们定义了两个getters,`computedProperty`和`computedFunction`。`computedProperty`访问了state的`count`和`number`属性,并返回它们的乘积。`computedFunction`接受一个参数`param`,并返回`count`加上`param`的结果。 请注意,上述代码仅为示例,实际使用时您可能需要根据您的具体情况来定义和使用getters。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值