Очистить форму после отправки с помощью vuex

Question

Я пытаюсь очистить form после отправки, в данном случае создавая простого пользователя. Я сбрасываю состояние с помощью vuex (см. Ниже). Но форма остается с данными.

так выглядит форма

<form @submit.prevent="onSubmit" v-if="!loading">
        <div class="form-group">
          <input placeholder="Name" v-model="user.name" type="text" name="name" class="form-control">
            <span class="invalid-feedback" v-if="errors.name">{{ errors.name }}</span>
        </div>

        <div class="form-group">
          <input v-bind:class="{ harError: errors.email }" placeholder="Email" v-model="user.email" type="email" name="email" class="form-control" id="validationCustom03">
            <span class="invalid-feedback" v-if="errors.email">{{ errors.email }}</span>
        </div>
...

метод onSubmit

          /**
           * on submitting the form  update or crete a user
           */
          onSubmit() {
              let action = this.id ? 'UPDATE_USER' : 'CREATE_USER';
              this.inProgress = true;
              this.$store
                  .dispatch(action)
                  .then(() => {
                      console.log('reset or not?');
                      this.inProgress = false;
                      // navigate to user
                      this.$router.push('users');
                  })
                  .catch( ({ response }) => {
                      this.inProgress = false;
                      this.errors = response.data.errors;
                      console.log('you have an error on creating an user')
                    });
            },

Сброс

        RESET_STATE({state}) {
            console.log('reset state');
            for (let f in state) {
                Vue.set(state, f, initialState[f]);
            }
        },

такое состояние

const initialState = {
    users: [],
    user: {
        name: '',
        email: '',
        password: '',
        type: '',
        bio: '',
        photo: '',
        active: '1',
    },
    loading: false,
};

export const store = new Vuex.Store({
    namespaced: true,
    state: { ...initialState },
...

input типы stais с данными

введите описание изображения здесь

Answer 1

Хорошо. По крайней мере, я понял сам. Вместо const я использовал функцию, чтобы установить initialtState вот так

function initialState () {
    return {
        users: [],
        user: {
            name: '',
            email: '',
            password: '',
            type: '',
            bio: '',
            photo: '',
            active: '1',
        },
        loading: false,
    }
}

export const store = new Vuex.Store({
    namespaced: true,
    state: { ...initialState() },

, а затем в mutations я назначил intitialState в state

   mutations: {
       /**
         *
         * @param state
         * @constructor
         */
        RESET_STATE: (state) => {
            Object.assign(state, initialState())
        },

в моем пользовательском компоненте, я отправил его вот так

  ...mapActions(['RESET_STATE']),

...

this.$store.dispatch("RESET_STATE");