creating an action to store player pronoun in state and persist the data in local storage

src/components/Player.vue

@@ -240,12 +240,12 @@ export default {
   },
   methods: {
     changePronoun() {
-      if (this.session.isSpectator) return;
+      const pronoun = prompt("Player preffered pronouns", this.player.pronoun);
-      const pronoun =
+      this.$store.commit("players/setPronoun", {
-        prompt("Player preffered pronouns", this.player.pronoun) ||
+        player: this.player,
-        this.player.pronoun;
+        pronoun
-      this.updatePlayer("pronoun", pronoun, true);
+      });
-      this.$emit("trigger", ["updatePlayer", this.player, "pronoun", pronoun]);
+      this.isMenuOpen = false;
     },
     toggleStatus() {
       if (this.grimoire.isPublic) {

src/store/modules/players.js

@@ -107,6 +107,12 @@ const mutations = {
       state.players[index][property] = value;
     }
   },
+  setPronoun(state, { player, pronoun }) {
+    const index = state.players.indexOf(player);
+    if (index >= 0) {
+      state.players[index].pronoun = pronoun;
+    }
+  },
   add(state, name) {
     state.players.push({
       ...NEWPLAYER,

src/store/persistence.js

@@ -122,6 +122,7 @@ module.exports = store => {
       case "players/set":
       case "players/swap":
       case "players/move":
+      case "players/setPronoun":
         if (state.players.players.length) {
           localStorage.setItem(
             "players",