Pinia

最新推荐文章于 2024-11-02 19:30:25 发布

我就活该是个小仙女

最新推荐文章于 2024-11-02 19:30:25 发布

阅读量186

点赞数

文章标签：数学建模

本文链接：https://blog.csdn.net/dudu_hope/article/details/131042762

版权

文章介绍了在Vue.js中如何使用defineStore创建状态管理店，并结合TypeScript处理getter方法。getter可以依赖状态或其他getter，可以通过this访问整个store实例。在TypeScript中，当getter需要使用this时，需要显式指定返回类型。同时，文章展示了如何组合getter并提供了代码示例。

摘要由CSDN通过智能技术生成

store 是一个用reactive 包裹的对象，这意味着不需要在getter 之后写.value，但是，就像setup 中的props 一样，我们不能对其进行解构

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

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // 自动将返回类型推断为数字
    doubleCount(state) {
      return state.counter * 2
    },
    // 返回类型必须明确设置
    doublePlusOne(): number {
      return this.counter * 2 + 1
    },
  },
})

可以直接在 store 实例上访问 getter：

<template>
  <p>Double count is {{ store.doubleCount }}</p>
</template>

<script>
export default {
  setup() {
    const store = useStore()
    return { store }
  },
}
</script>

与计算属性一样，您可以组合多个 getter。通过 this 访问任何其他 getter。

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    // 类型是自动推断的，因为我们没有使用 `this`
    doubleCount: (state) => state.counter * 2,
    /**
     * 返回计数器值乘以二加一。
     */
    doubleCountPlusOne() {
      // 自动完成 
      return this.doubleCount + 1
    },
  },
})