Остановить обновление магазина после получения ответа от сервера, nuxt? - PullRequest
Новая
       192

Остановить обновление магазина после получения ответа от сервера, nuxt?

0 голосов
/ 07 августа 2020

Проблема:

завис на кнопке компонента вызов функции из магазина

функция в магазине делает две вещи -

  1. доступ к серверу через api и получить ответ

  2. , если ответ получен, то обновляет переменную Info в магазине

Дальше ...

компонент имеет div , который содержит значение переменной Info

на шаге 2 ☝️ выполняется, переменная временно обновляется

затем через секунду значение переменной возвращается к базовому значению.

возможно, его происходит, потому что у меня есть ServerSideRendering и для server я настроил serverMiddlevare в соответствии с этим шаблоном https://github.com/nuxt-community/express-template,

, может быть, вы знаете, как остановить обновление хранилища?

в /store/index.js

import axios from 'axios'

export const state = () => ({
  info: 'undefined',
})
export const mutations = {
  SET_INFO(state) {
    state.info = 'someInfo'
  },
}
export const actions = {
  async registerUserv2({ commit }, registerInfo) {
    try {
      await axios
        .post('http://localhost:3000/api/register', registerInfo)
        .then((response) => {commit('SET_INFO')})
        .catch((error) => console.log(error))
    } catch {
      return {}
    }
  },
}

на странице регистрации 

<template>
  <div>
    <user-auth-form
      type-of-form="registration"
      button-text="Зарегистрироваться"
      @register="registerUser"
    />
    <div>{{ $store.state.info}}</div>
  </div>
</template>

<script>
import userAuthForm from '~/components/UserAuthForm.vue'
export default {
  components: { userAuthForm },
  data() {
  },
  mounted() {},
  methods: {
    registerUser(userInfo) {
      this.$store.dispatch('registerUserv2', userInfo)
    },
  },
}
</script>

nuxt config * 105 1 * 

  mode: 'universal',

  target: 'server',

  serverMiddleware: {
    '/api': '~/api',
  },

индекс API 

const express = require('express')
const mongoose = require('mongoose')
const bodyParser = require('body-parser')


const app = express()
mongoose
  .connect('mongodb://localhost:27017/dbForNuxt', {
    useUnifiedTopology: true,
    useNewUrlParser: true,
  })
  .then(() => console.log('MongoDB успешно подключена'))
  .catch((error) => console.log(error))

app.use(bodyParser.urlencoded({ extended: true }))
app.use(bodyParser.json())

const auth = require('./routes/auth')

app.use(auth)

if (require.main === module) {
  const port = process.env.PORT || 3001
  app.listen(port, () => {
    console.log(`API server listening on port ${port}`)
  })
}

module.exports = app

команда dev nodemon --watch api --exec nuxt

...