如何重置PINIA状态的数据之一？

Question

我在设置页面上有一个设计，每个人都会使用HAVA重置按钮，现在我使用Pinia为Store库。 我kown $ 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's 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（[]），两个重置所有状态，因为键？长度条件是假的。

这是一个工作示例：

const { createPinia, defineStore, storeToRefs } = Pinia;
const { createApp, reactive, toRefs } = Vue;
const defaultState = {
  foo: "bar",
  boo: "far",
};

const useStore = defineStore("foobar", {
  state: () => ({ ...defaultState }),
  actions: {
    reset(keys) {
      Object.assign(
        this,
        keys?.length ? _.pick(defaultState, keys) : defaultState
      );
    },
  },
});

const pinia = createPinia();
const app = createApp({
  setup() {
    const store = useStore();
    const localState = reactive({
      resetFoo: false,
      resetBoo: false,
    });
    const resetStore = () => store.reset(
      [
        localState.resetFoo ? "foo" : null,
        localState.resetBoo ? "boo" : null,
      ].filter((o) => o)
    );
    return { ...storeToRefs(store), ...toRefs(localState), resetStore };
  },
});
app.use(pinia);
app.mount("#app");

<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<script src="https://unpkg.com/vue-demi"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pinia/2.0.28/pinia.iife.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.21/lodash.min.js"></script>
<div id="app">
  <input v-model="foo" />
  <input v-model="boo" />
  <pre v-text="JSON.stringify({foo, boo}, null, 2)"></pre>
  <hr>
  <label>
    <input type="checkbox" v-model="resetFoo" />ResetFoo</label>
  <label>
    <input type="checkbox" v-model="resetBoo" />ResetBoo</label>
  <button @click="resetStore">Reset</button>
  
</div>

Answer 2

上面的示例在属性已经更改时不会将一个属性重置为默认值。
那是因为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