vue.js 如何重置pinia状态中的数据之一?

yacmzcpb  于 2022-11-30  发布在  Vue.js
关注(0)|答案(2)|浏览(1569)

我在设置页面中有一个设计,每个页面都有一个重置按钮,现在我用pinia作为存储库,我知道$reset是重置整个pinia状态的,那么,如何重置pinia状态中的一个数据呢?

rjjhvcjd

rjjhvcjd1#

我这样做的典型方式是:

const defaultState = {
  foo: 'bar'
}

export const useFoo = defineStore('foo', {
  state: () => defaultState,
  actions: {
    reset() {
      Object.assign(this, defaultState);
    }
  }
})

你得到了初始状态和一个reset()操作,这个操作将任何状态重置为初始状态。
如果您只想重置一个特定的状态道具,而不想触及其他任何东西,只需为其指定默认值:

useFoo().foo = 'bar';

如果您觉得它很有用,您也可以有一个泛型update,其中您可以在一个调用中为state分配多个值:

actions: {
  update(payload) {
    Object.assign(this, payload)
  }
}

使用方法如下:

useFoo().update({ 
  foo: 'bar',
  // add more props if needed...
});

最后,lodashpick可以用来从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()useFoo().reset([]),这两者都重置所有状态,因为keys?.length条件为假。

pinkon5k

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

相关问题