Question

我正在尝试提交一个更新用户帐户设置的表格。该表格已正确提交给我的API，并且数据库条目已更新。该组件最初会正确更新，但是当我刷新页面时，该组件会恢复到其初始状态，这告诉我Vuex存储未正确更新（我认为？）

我确定这通常是我对Vuex的无知，但我也觉得自己非常接近。我基于Jason Watmore的出色文章，特别是this one。任何建议将不胜感激！

ProfilePage.vue（父组件）

<template>

    <div class='profile-container'>

      ...

      <!-- {/* User Info */} -->
      <div class='user-info-container'>
        <h1 class='user-headline'>{{ account.user | prettyName }}</h1>
        <p>{{ account.user | userLocation }}</p>
      </div>

      <!-- {/* Personal Details Form */} -->
      <div class='personal-details' v-if='activeSelection(0)' >
        <personal-form :account='this.account.user' v-on:listensubmit='handleSubmit'/> 
      </div>

    </div>

</template>

<script>
import { mapState, mapActions } from 'vuex';
import PersonalForm from './_partials/PersonalForm';

export default {
  data: () => ({
    tile         : false,
  }),
  computed: {
    ...mapState({
      account: state => state.account
    }),
  },
  methods: {
    ...mapActions('account', ['update']),
    handleSubmit: function(user) {
      this.$validator.validateAll().then((result) => {
        if (result) {
          this.submitted = true;
          this.update(user);
        }
      });
    },
  },
  components: {
    PersonalForm,
  }
};
</script>

PersonalForm.vue（子组件）

<template>
  <v-form ref="personal-details-form" lazy-validation>
    <v-container fluid grid-list-lg>
      <v-layout row wrap>
        <!-- First Name -->
        <v-flex xs12 md6>
          <v-text-field
            v-model="user.firstName"
            label="First Name"
            color="primary"
            prepend-inner-icon="playlist_add"
            outline
          />
        </v-flex>

        <!-- Last Name -->
        <v-flex xs12 md6>
          <v-text-field
            v-model="user.lastName"
            label="Last Name"
            color="primary"
            prepend-inner-icon="playlist_add"
            outline
          />
        </v-flex>

        <!-- Email -->
        <v-flex xs12 md6>
          <v-text-field
            v-model='user.email'
            v-validate="'required|email'"
            :error-messages="errors.collect('email')"
            label='E-mail'
            data-vv-name='email'
            color='primary'
            outline
            prepend-inner-icon="mail_outline"
          />
        </v-flex>
      </v-layout>

      <v-layout justify-end>
        <v-btn @click="handleSubmit" color="primary" :ripple="false">Submit</v-btn>
      </v-layout>
    </v-container>
  </v-form>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  data: () => ({
    submitted    : false,
  }),
  computed: {
    user () {
      return {...this.account}
    }
  },
  props: {
    account: {
      type    : Object,
      required: true,
    },
    listensubmit: {
      type: Function,
    }
  },
  methods: {
    handleSubmit(event) {
      this.$emit('listensubmit', this.user);
    }
  },
}
</script>

account.module.js

import { userService } from '../_services';
import { router } from '../_helpers';

const user = JSON.parse(localStorage.getItem('user'));
const state = user
  ? { status: { loggedIn: true }, user }
  : { status: {}, user: null };

const actions = {
update({ dispatch, commit }, user) {
    commit('updateRequest', user);

    userService.update(user)
      .then(
        u => {
          commit('updateSuccess', user);
          dispatch('alert/success', 'Account updated', { root: true })
        },
        error => {
          commit('updateFailure', error);
          dispatch('alert/error', error, { root: true });
        }
      );
  },
}

const mutations = {
updateRequest(state, user) {
    state.status = { updating: true };
  },
  updateSuccess(state, user) {
    state.status = { updated: true };
    state.user = user;
  },
  updateFailure(state) {
    state.status = { updated: false };
  }
}

export const account = {
  namespaced: true,
  state,
  actions,
  mutations,
};

user.service.js

import config from 'config';
import { authHeader } from '../_helpers';

export const userService = {
  update,
};

function update(user) {
  const requestOptions = {
    method: 'PUT',
    headers: { ...authHeader(), 'Content-Type': 'application/json' },
    body: JSON.stringify(user)
  };

  return fetch(`${config.apiUrl}/users/${user.id}`, requestOptions).then(handleResponse);
}

function handleResponse(response) {
  return response.text().then(text => {
      const data = text && JSON.parse(text);

      if (!response.ok) {
          if (response.status === 401) {
              // auto logout if 401 response returned from api
              logout();
              location.reload(true);
          }

          const error = (data && data.message) || response.statusText;
          return Promise.reject(error);
      }

      return data;
  });
}

Answer 1

在每个问题的注释中，根据Phil的帮助，更新localStorage中的用户对象似乎已解决了该问题。

数据库更新，但Vuex存储库未更新

1 个答案: