如何重置 pinia 状态中的一个数据？

Question

我在设置页面中有一个设计，每个页面都有重置按钮，现在我使用 pinia 作为存储库。我知道$reset重置了整个pinia状态，那么，如何重置其中一个pinia状态的数据？

Answer 1

我这样做的典型方式：

const defaultState = {
  foo: 'bar'
}

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

您将获得初始状态和一个 reset() 操作，该操作将任何状态重置为初始状态。显然，你可以选择你在 defaultState.

中输入的内容

如果你只想重置一个特定的状态道具，而不触及任何其他东西，只需为其分配默认值即可：

useFoo().foo = 'bar';

如果你觉得它有用，你也可以有一个通用的update，你可以在一次调用中为状态分配多个值：

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

像这样使用它：

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

最后但同样重要的是，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 的当前值。

要重置两者（使用上述操作）：

useFoo().reset(['foo', 'boo']);

...或useFoo().reset()或useFoo().reset([])，两者都会重置所有状态，因为keys?.length条件为假。

如何重置 pinia 状态中的一个数据？

how to reset one of data in pinia state?

vue.js

pinia