假设我们有一个 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
}
}
可以通过几种方式来编写 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,
};
});
使用存储选项更容易做到这一点,因为这不需要保留对基础数据的引用来访问它;它可以在商店实例上使用:
function defineFooStore(name, options = {}) {
return defineStore(name, {
state: () => ({
foo: 1,
...options.state
}),
actions: {
doFoo() {},
...options.actions
},
getters: {
getFoo() {},
...options.actions
},
});
}
另一方面,在 TypeScript 中将需要更多的工作来正确地键入泛型函数。