store.js

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';
import createPersistedState from 'vuex-persistedstate';

Vue.use(Vuex)

export const store = new Vuex.Store({
  // plugins: [createPersistedState()],
  state: {  
    tournamentCreated: false,
    playersRegistered: false,
    testVar: false,
    currentTournament: {
      "id": '',
      "name": '',
      "players" : []
    },
    temporaryPlayerList: [],
    registeredPlayerList: []
  },
  mutations: {
    createTournament: function(state, tournamentName){
      axios({
        method: "POST",
        url: "http://127.0.0.1:8000/api/tournaments/",
        auth: {
          username: "attila",
          password: "password"
        },
        data: { "name": tournamentName }
      }).then(response => {
        Vue.set(state, 'currentTournament', response.data);
        Vue.set(state, 'temporaryPlayerList', []);
        Vue.set(state, 'tournamentCreated', true);
        // state.currentTournament = response.data;
        // state.temporaryPlayerList = [];
        // state.tournamentCreated = true;
        console.log(state.currentTournament);
      }).catch(e => {
        console.log(e)
      })

    },
    addPlayer: function(state, playerName){
      state.temporaryPlayerList.push(playerName);
    },
    registerPlayers: function(state){
      let register_player_list = []
      for (let player in state.temporaryPlayerList){
        let player_ob = {
          "name": state.temporaryPlayerList[player],
          "tournament": state.currentTournament.id
        }
        register_player_list.push(player_ob)
      };
      axios({
        method: 'POST',
        url: "http://127.0.0.1:8000/api/register-players/",
        auth: {
          username: "attila",
          password:  "password"
        },
        data: register_player_list
      }).then(response => {
          console.log(response)
          console.log("here");
          state.registeredPlayerList = response.data;
          state.playersRegistered = true;
          state.temporaryPlayerList = [];
          console.log("also here")
        }).catch(e => {
          console.log(e);
        }) 
    },
    runTest: function(state){
      console.log(state.testVar)
      state.testVar= !state.testVar
      console.log(state.testVar)
    }
  },
  
  actions: {
    createTournament: function(context, tournamentName){
      context.commit("createTournament", tournamentName);
    },
    registerPlayers: function(context){
      context.commit('registerPlayers');
    },
    runTest: function(context){
      context.commit('runTest');
    }
  }
})