在 store 中定义 getter 传参

Posted 前端精髓

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了在 store 中定义 getter 传参相关的知识,希望对你有一定的参考价值。

Vuex 3.x 允许我们在 store 中定义“getter”(可以认为是 store 的计算属性)。就像计算属性一样,getter 的返回值会根据它的依赖被缓存起来,且只有当它的依赖值发生了改变才会被重新计算。

Getter 接受 state 作为其第一个参数:

const store = new Vuex.Store(
  state: 
    todos: [
       id: 1, text: '...', done: true ,
       id: 2, text: '...', done: false 
    ]
  ,
  getters: 
    doneTodos: state => 
      return state.todos.filter(todo => todo.done)
    
  
)

Getter 也可以接受其他 getter 作为第二个参数:

getters: 
  // ...
  doneTodosCount: (state, getters) => 
    return getters.doneTodos.length
  

在 Pinia 中定义常规函数时通过 this 访问到整个 store 的实例,可以通过 this 访问任何其他 getter:

export const useStore = defineStore('main', 
  state: () => (
    counter: 0,
  ),
  getters: 
    doubleCount: (state) => state.counter * 2,
    doubleCountPlusOne() 
      return this.doubleCount + 1
    ,
  ,
)

Vuex 4.x 允许你也可以通过让 getter 返回一个函数,来实现给 getter 传参。在你对 store 里的数组进行查询时非常有用。

getters: 
  // ...
  getTodoById: (state) => (id) => 
    return state.todos.find(todo => todo.id === id)
  

在 Pinia 中将参数传递给 getter 也是这样的,您可以从 getter 返回一个函数以接受任何参数。

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

注意,getter 在通过方法访问时,每次都会去进行调用,而不会缓存结果。

<template>
  <p>User 2:  getUserById(2) </p>
</template>

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

export default defineComponent(
  setup() 
    const store = useStore()
    // ❌ 这不起作用,因为它会破坏响应式
    const  name, doubleCount  = store

    name // "eduardo"
    doubleCount // 2

    return 
      // 一直会是 "eduardo"
      name,
      // 一直会是 2
      
  ,
)

为了从 Store 中提取属性同时保持其响应式,您需要使用 storeToRefs()。它将为任何响应式属性创建 refs。当您仅使用 store 中的状态但不调用任何操作时,这很有用:

import  storeToRefs  from 'pinia'

export default defineComponent(
  setup() 
    const store = useStore()
    // `name` 和 `doubleCount` 是响应式引用
    const  name, doubleCount  = storeToRefs(store)

    return 
      name,
      doubleCount
    
  ,
)

以上是关于在 store 中定义 getter 传参的主要内容,如果未能解决你的问题,请参考以下文章

在 store 中定义 getter 传参

vuex的使用

Vuex 从 getter 访问 this.$store

如何在HBuilderX的自定代码块中输出$符号 - 带$符号输出this.$store.getter

Vuex - Getter

Vue全家桶新一代的状态管理--Pinia