Pinia学习笔记之--核心概念Getters

Getters

getter与Store状态的计算值完全相同。它们可以用defineStore()中的getters属性来定义。它们接收state作为第一个参数，以鼓励使用箭头函数:

export const  useStore = defineStore('main', {
    state: () => ({
        counter: 0
    }),
    getters: {
        doubleCount: (state) => state.counter * 2
    }
})

大多数时候，getter只依赖于状态，但是，它们可能需要使用其他getter。因此，当定义一个常规函数时，我们可以通过这个函数访问整个store实例，但需要定义返回的类型(在TypeScript中)。这是由于TypeScript中的一个已知限制，不会影响用箭头函数定义的getter，也不会影响不使用This的getter:

export const useStore = defineStore('mian', {
    state: (() => {
        counter: 0
    }),
    getters: {
        // 自动推断类型为nubmer
        doubleCount(state) {
            return state.counter * 2
        },
        // 返回的类型必须被设置
        doublePlusOne(): number {
            // autocompletion and typings for the whole store
            return this.doubleCount + 1
        }
    }
})

然后你可以直接访问store实例getter：

<template>
    <p>Double count is {{ store.doubleCount }}</p>
</tempalte>
<script>
    export default {
        setup() {
            const store = useStore()
            return { store }
        }
    }
</script>

访问其它的getters

与计算属性一样，您可以组合多个getters。通过this访问任何其他的getters。即使您不使用TypeScript，您也可以使用JSDoc提示IDE输入的类型

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // type is automatically inferred because we are not using `this`
    doubleCount: (state) => state.counter * 2,
    // here we need to add the type ourselves (using JSDoc in JS). We can also
    // use this to document the getter
    /**
     * Returns the counter value times two plus one.
     *
     * @returns {number}
     */
    doubleCountPlusOne() {
      // autocompletion ✨
      return this.doubleCount + 1
    },
  },
})

给getters传参数

Getter只是后台的计算属性，所以不可能向它们传递任何参数。但是，你可以从getter返回一个函数来接受任何参数:

export const useStore = defineStore('main', {
  getters: {
    getUserById: (state) => {
      return (userId) => state.users.find((user) => user.id === userId)
    },
  },
})

然后再组件中这样使用：

<script>
export default {
    setup() {
        const store = useStore()

        return {
            getUserById: store.getUserById
        }
    }
}
</script>
<template>
  <p>User 2: {{ getUserById(2) }}</p>
</template>

注意，当这样做时，getter不再被缓存，它们只是您调用的函数。然而，你可以在getter本身中缓存一些结果，这是不常见的，但更高效:

export const useStore = defineStore('main', {
  getters: {
    getActiveUserById(state) {
      const activeUsers = state.users.filter((user) => user.active)
      return (userId) => activeUsers.find((user) => user.id === userId)
    },
  },
})

访问其它实例的getters

要使用另一个store中的 getter，你可以直接在getter中使用它:

import { useOtherStore } from './other-store'

export const useStore = defineStore('main', {
  state: () => ({
    // ...
  }),
  getters: {
    otherGetter(state) {
      const otherStore = useOtherStore()
      return state.localData + otherStore.data
    },
  },
})

在setup()中的用法

你可以直接访问任何getter作为存储的属性(完全像state属性):

export default {
  setup() {
    const store = useStore()

    store.counter = 3
    store.doubleCount // 6
  },
}

Options API 中的用法

对于以下示例，您可以假设创建了以下store:

// Example File Path:
// ./src/stores/counterStore.js

import { defineStore } from 'pinia',

const useCounterStore = defineStore('counterStore', {
  state: () => ({
    counter: 0
  }),
  getters: {
    doubleCounter() {
      return this.counter * 2
    }
  }
})

使用 setup()

虽然Composition API并不适合所有人，但是setup()钩子可以让Pinia更容易在Options API中使用。不需要额外的帮助函数!

import { useCounterStore } from '../stores/counterStore'

export default {
  setup() {
    const counterStore = useCounterStore()

    return { counterStore }
  },
  computed: {
    quadrupleCounter() {
      return counterStore.doubleCounter * 2
    },
  },
}

不使用 setup()

你可以使用在前一节中使用的mapState()函数来映射到getter:

import { mapState } from 'pinia'
import { useCounterStore } from '../stores/counterStore'

export default {
  computed: {
    // gives access to this.doubleCounter inside the component
    // same as reading from store.doubleCounter
    ...mapState(useCounterStore, ['doubleCount'])
    // same as above but registers it as this.myOwnName
    ...mapState(useCounterStore, {
      myOwnName: 'doubleCounter',
      // you can also write a function that gets access to the store
      double: store => store.doubleCount,
    }),
  },
}