src/store/network/actions.ts

@@ -14,10 +14,10 @@ const actions: ActionTree<NetworkState, AppState> = {
     const client = new PeerClient(options.playerInfo, options._customPeer);
     commit("becomeClient", { peer: client });
     client.on("connected", () => {
-      commit("connected");
+      commit("connectionStatusChanged", "connected");
     });
     client.on("disconnected", () => {
-      commit("disconnected");
+      commit("connectionStatusChanged", "disconnected");
     });
     client.on("error", err => {
       commit("connectionError", err);

src/store/network/mutations.ts

@@ -1,5 +1,10 @@
 import { MutationTree } from "vuex";
-import { NetworkState, ServerNetworkState, ClientNetworkState } from "./types";
+import {
+  NetworkState,
+  ServerNetworkState,
+  ClientNetworkState,
+  ConnectionStatus
+} from "./types";
 import { LocalClient, PeerServer, PeerClient } from "@/network";
 
 const mutations: MutationTree<NetworkState> = {
@@ -15,12 +20,8 @@ const mutations: MutationTree<NetworkState> = {
     (state as ClientNetworkState).peer = payload.peer;
   },
 
-  connected(state) {
-    (state as ClientNetworkState).connectionStatus = "connected";
-  },
-
-  disconnected(state) {
-    (state as ClientNetworkState).connectionStatus = "disconnected";
+  connectionStatusChanged(state, status: ConnectionStatus) {
+    (state as ClientNetworkState).connectionStatus = status;
   },
 
   connectionError(state, error) {

src/store/network/types.ts

@@ -7,6 +7,12 @@ import {
 } from "@/network";
 import Peer from "peerjs";
 
+export type ConnectionStatus =
+  | "connecting"
+  | "connected"
+  | "disconnected"
+  | "error";
+
 export interface ChatMessage {
   who: string;
   to: string;
@@ -23,7 +29,7 @@ export interface NoNetworkState extends SharedNetworkState {
 
 export interface ClientNetworkState extends SharedNetworkState {
   peerType: "client";
-  connectionStatus: "connecting" | "connected" | "disconnected" | "error";
+  connectionStatus: ConnectionStatus;
   connectionError?: Error;
   peer: PeerClient;
 }