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类型的静态数据

Answer 1

好吧，至少我自己弄清楚了，const的Insead我像这样使用函数来设置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");

用vuex提交后清除表格

1 个答案: