我在设置页面中有一个设计,每个页面都有一个重置按钮,现在我用pinia作为存储库,我知道$reset是重置整个pinia状态的,那么,如何重置pinia状态中的一个数据呢?
$reset
rjjhvcjd1#
我这样做的典型方式是:
const defaultState = { foo: 'bar' } export const useFoo = defineStore('foo', { state: () => defaultState, actions: { reset() { Object.assign(this, defaultState); } } })
你得到了初始状态和一个reset()操作,这个操作将任何状态重置为初始状态。如果您只想重置一个特定的状态道具,而不想触及其他任何东西,只需为其指定默认值:
reset()
useFoo().foo = 'bar';
如果您觉得它很有用,您也可以有一个泛型update,其中您可以在一个调用中为state分配多个值:
update
actions: { update(payload) { Object.assign(this, payload) } }
使用方法如下:
useFoo().update({ foo: 'bar', // add more props if needed... });
最后,lodash的pick可以用来从defaultState的值中选择要重置的值,而不必指定实际的值:
lodash
pick
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的当前值。若要重置两者(使用上述操作):
foo
'bar'
boo
useFoo().reset(['foo', 'boo']);
...或useFoo().reset()或useFoo().reset([]),这两者都重置所有状态,因为keys?.length条件为假。
useFoo().reset()
useFoo().reset([])
keys?.length
pinkon5k2#
上面的例子并没有在属性已经改变的情况下将属性重置为默认值。这是因为defaultState是被动的,你需要复制defaultState使它不再是被动的。
import _pick from 'lodash.pick'; const defaultState = { foo: 'bar', }; export const useStore = defineStore('store', { state: () => ({...defaultState}), actions: { reset(keys) { Object.assign(this, keys?.length ? _pick(defaultState, keys) : defaultState // if no keys provided, reset all ); } } })
这样使用
useStore().reset(['foo']);
现在,这将把foo重置回bar
bar
2条答案
按热度按时间rjjhvcjd1#
我这样做的典型方式是:
你得到了初始状态和一个
reset()
操作,这个操作将任何状态重置为初始状态。如果您只想重置一个特定的状态道具,而不想触及其他任何东西,只需为其指定默认值:
如果您觉得它很有用,您也可以有一个泛型
update
,其中您可以在一个调用中为state分配多个值:使用方法如下:
最后,
lodash
的pick
可以用来从defaultState
的值中选择要重置的值,而不必指定实际的值:使用方法如下:
这只会将
foo
重置为'bar'
,但不会触及boo
的当前值。若要重置两者(使用上述操作):
...或
useFoo().reset()
或useFoo().reset([])
,这两者都重置所有状态,因为keys?.length
条件为假。pinkon5k2#
上面的例子并没有在属性已经改变的情况下将属性重置为默认值。这是因为defaultState是被动的,你需要复制defaultState使它不再是被动的。
这样使用
现在,这将把
foo
重置回bar