Pinia 中将参数传递给 getter

共 2021字,需浏览 5分钟

 ·

2022-08-15 23:01


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 } },})



浏览 99
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报
评论
图片
表情
推荐
点赞
评论
收藏
分享

手机扫一扫分享

分享
举报