我在設定頁面有一個設計，每個都有重置按鈕，現在我使用 pinia 作為存盤庫。我知道$reset是重置整個pinia狀態，那么，如何重置pinia狀態中的一個資料？
uj5u.com熱心網友回復：
我這樣做的典型方式：
const defaultState = {
foo: 'bar'
}
export const useFoo = defineStore('foo', {
state: () => defaultState,
actions: {
reset() {
Object.assign(this, defaultState);
}
}
})
您將獲得初始狀態和一個reset()將任何狀態重置為初始狀態的操作。顯然，您可以選擇放入的內容defaultState。
如果您只想重置一個特定的狀態道具，而不涉及其他任何內容，只需為其分配默認值：
useFoo().foo = 'bar';
如果你覺得它有用，你也可以有一個 generic update，你可以在一次呼叫中為 state 分配多個值：
actions: {
update(payload) {
Object.assign(this, payload)
}
}
像這樣使用它：
useFoo().update({
foo: 'bar',
// add more props if needed...
});
最后但并非最不重要的一點是，lodash'spick可用于從值中挑選要重置的內容defaultState，而無需指定實際值：
import { pick } from 'lodash-es';
const defaultState = {
foo: 'bar',
boo: 'far'
};
export const useFoo = defineStore('foo', {
state: () => defaultState,
actions: {
reset(keys) {
Object.assign(this, keys?.length
? pick(defaultState, keys)
: defaultState // if no keys provided, reset all
);
}
}
})
像這樣使用它：
useFoo().reset(['foo']);
這只會重置foo為'bar'，但不會觸及 的當前值boo。
重置兩者（使用上述操作）：
useFoo().reset(['foo', 'boo']);
...或useFoo().reset()or useFoo().reset([])，兩者都重置所有狀態，因為keys?.length條件是錯誤的。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/466009.html
上一篇：在VueJS中動態創建組件