扩展或组合 Pina 设置存储以实现可重用的 getter、setter 和操作

Question

假设我们有一个 Pinia 设置商店，它实现了一组基本的状态、getter 和操作：

export const useBaseStore = defineStore('base-store', () => {
  const name = ref<string>('');
  const age = ref<number>(1);
  const ageString = computed(() => `${name.value} is aged ${size.value}`)

  function doubleAge() {
    age.value *= 2;
  }

  return { name, age, ageString, doubleAge }
}

我们如何将此存储扩展或组合成更多存储以重用这组状态行为？例如

export const usePersonStore = defineStore('person-store', () => {

  // ... somehow compose all of 'base-store'

  function tripleAge() {
    age.value *= 3;
  }

  return {
    // ...include all getters, setters and actions returned by 'base-store', as well as those defined here
    tripleAge
  }
}

export const useOtherStore = defineStore('other-store', () => {

  // ... somehow compose all of 'base-store'

  function sayHello() {
    console.log('Hello')
  }

  return {
    // ...include all getters, setters and actions returned by 'base-store', as well as those defined here
    sayHello
  }
}

Answer 1

可以通过几种方式来编写 Pinia。我没有尝试扩展商店，而是从基本商店创建了一个可组合项，然后从中定义了两个商店。

person-store需要从

age

函数内访问

tripleAge()

，因此设置将基数作为常量引入。

other-store直接使用扩展运算符，因为它只添加一个新函数，并且不需要访问其他属性/函数。

import { ref, computed } from 'vue';
import { defineStore } from 'pinia';

const useBaseStore = () => {
  const name = ref<string>('');
  const age = ref<number>(1);
  const ageString = computed(() => `${name.value} is aged ${age.value}`);

  function doubleAge() {
    age.value *= 2;
  }

  return { name, age, ageString, doubleAge };
};

export const usePersonStore = defineStore('person-store', () => {
  const base = useBaseStore();
  function tripleAge() {
    base.age.value *= 3;
  }
  return { ...base, tripleAge };
});

export const useOtherStore = defineStore('other-store', () => {
  function sayHello() {
    console.log('Hello');
  }
  return {
    ...useBaseStore(),
    sayHello,
  };
});