Публикуйте, не добавляя контент, используя vuex и json-server - PullRequest
Новая
       13

Публикуйте, не добавляя контент, используя vuex и json-server

0 голосов
/ 05 июня 2019

Я новичок в vuex и использую json-server для фиктивных данных API.Мне удалось получить фиктивные данные с json-сервера, но при добавлении новых данных с помощью post добавляется только идентификатор, но не добавляются пользовательские входные данные.Метод post успешен, но кроме сгенерированных id данных не добавлено.Вот мой код ниже.

Новые данные, добавленные после отправки, помещаются в rooms list только во внешнем интерфейсе, но когда я перезагружаю страницу, отправленные данные теперь исчезают.

store.js 

import Vue from 'vue'
import Vuex from 'vuex'
import Axios from 'axios'

Vue.use(Vuex)

export default Axios.create({
  headers: {
    'Authorization': false,
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  }
})

export const store = new Vuex.Store({
  state: {
    rooms: [],
    newRoom: ''
  },
  getters: {
    NEW_ROOM: state => state.newRoom,
    ROOMS: state => state.rooms
  },
  mutations: {
    SET_ROOMS: (state, payload) => {
      state.rooms = payload
    },
    ADD_ROOM: (state, payload) => {
      state.rooms.push(payload)
    }
  },
  actions: {
    GET_ROOMS: async (context, payload) => {
      let { data } = await Axios.get('http://localhost:3000/rooms')
      context.commit('SET_ROOMS', data)
    },
    SAVE_ROOM: async (context, payload) => {
      let { data } = await Axios.post('http://localhost:3000/rooms')
      context.commit('ADD_ROOM', payload)
    }
  }
})

AddRoom.vue 

<template>
  <div>
   <button class="btn w-16 h-16 bg-secondary rounded-full text-3xl fixed bottom-0 right-0 mr-5 mb-5 hover cursor-pointer font-bold hover:shadow-2xl">
      <i class="icon icon-add font-bold non-italic"></i>
   </button>
   <form @submit.prevent="submitRoom">
     <label for="name">Room name</label>
     <input type="text" v-model="room.name">
     <button type="submit">Save</button>
   </form>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  data () {
    return {
      room: {
        name: ''
      }
    }
  },
  computed: {
    ...mapState(['ROOMS'])
  },
  methods: {
    submitRoom () {
      this.$store.dispatch('SAVE_ROOM', this.room)
    }
  }
}
</script>
...