Refactor userList behaviour to not use methods in root Vue instance

client/components/Chat.vue

@@ -47,7 +47,7 @@
 						<button
 							class="rt"
 							aria-label="Toggle user list"
-							@click="$root.toggleUserlist"
+							@click="$store.commit('toggleUserlist')"
 						/>
 					</span>
 				</div>

client/js/socket-events/init.js

@@ -38,7 +38,7 @@ socket.on("init", function(data) {
 			isUserlistOpen = "true";
 		}
 
-		vueApp.setUserlist(isUserlistOpen === "true");
+		store.commit("userlistOpen", isUserlistOpen === "true");
 
 		document.body.classList.remove("signed-out");
 

client/js/store.js

@@ -96,6 +96,9 @@ const store = new Vuex.Store({
 		toggleSidebar(state) {
 			state.sidebarOpen = !state.sidebarOpen;
 		},
+		toggleUserlist(state) {
+			state.userlistOpen = !state.userlistOpen;
+		},
 		userlistOpen(state, payload) {
 			state.userlistOpen = payload;
 		},

client/js/vue.js

@@ -36,14 +36,6 @@ const vueApp = new Vue({
 		}, 1);
 	},
 	methods: {
-		setUserlist(state) {
-			storage.set("thelounge.state.userlist", state);
-			this.$store.commit("userlistOpen", state);
-			this.$emit("resize");
-		},
-		toggleUserlist() {
-			this.setUserlist(!this.$store.state.userlistOpen);
-		},
 		switchToChannel(channel) {
 			if (
 				this.$store.state.activeChannel &&
@@ -136,6 +128,14 @@ store.watch(
 	}
 );
 
+store.watch(
+	(state) => state.userlistOpen,
+	(userlistOpen) => {
+		storage.set("thelounge.state.userlist", userlistOpen);
+		vueApp.$emit("resize");
+	}
+);
+
 Vue.config.errorHandler = function(e) {
 	store.commit("currentUserVisibleError", `Vue error: ${e.message}`);
 	console.error(e); // eslint-disable-line