如何重置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';

如果您发现它有用，您还可以拥有一个 generic update，您可以在一次调用中为 state 分配多个值：

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

像这样使用它：

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

最后但并非最不重要的一点是，lodashspick可用于从值中挑选要重置的内容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']);

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

这是一个工作示例：

const defaultState = {
  foo: 'bar'
}

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

useFoo().foo = 'bar';