Wywoływanie fragmentu kodu zamiast typowej zmiennej Vuex

Question

Mam teraz taką dość ciężką rozkminę. Teraz akurat walczę ze store w Vuex, chociaż tego typu temat może pojawić się wszędzie indziej.

Tworzę sobie własną wersje gry monopoly.  Tak wygląda tablica z graczami w store:

players:[
        {color:'red', field:0, name:'red', money:1000,current:true },
        {color:'blue', field:0,name:'blue', money:1000,current:false},
        {color:'gray',field:0,name:'agent', money:0,current:false}
        ],

Wlaściwość field przechowuje numer pola na ktorym przebywa gracz. Sęk w tym też że numer pola musi się zrestować po przejściu całej planszy, tutaj robię to przez modulo.

Tak wygląda moja metoda na przenoszenie gracza:

let field = this.$store.state.players.find((el)=>el.current==true).field;
            field += val;
            field = field % 26;

Oczywiście ona nie zadziała, bo zapisując daną ze store do zmiennej field manipulujemy potem tylko zmienną field, a nie tym co faktycznie siedzi w store. 

Zadziała dopiero taki kod:

this.$store.state.players.find((el)=>el.current==true).field += val;
            this.$store.state.players.find((el)=>el.current==true).field = this.$store.state.players.find((el)=>el.current==true).field % 26;

Wygląda to dosyć idiotycznie, ale działa. Natomiast nie ma lepszego sposobu na używanie powtarzających się fragmentów kodu?

 

 

Answer 1

Jeśli chodzi o shortcut do ostatniej linijki:

const currentPlayer = this.$store.state.players.find(el => el.current);
currentPlayer.field = (currentPlayer.field + val) % 26;

Takie coś zadziała ze względu na to, że obiekty w JS są przekazywane jako referencja. Natomiast samo filtrowanie obiektów w taki sposób, że szukasz obecnego na podstawie wartości pól jest jakieś takie... passe. :P Użyj do przechowywania gracza o obecnym ruchu jakiegoś identyfikatora, np. indeksu w tablicy graczy. Na podstawie tego będziesz mógł wygodniej zmieniać obecnego i wygeneruje to ogólnie dosyć mniej problemów. Vuex działa w taki sposób, że obserwuje sobie obiekt i na podstawie zmian renderuje widoki. 

Comments

Dużo elegantszym rozwiązaniem byłoby użycie gettera.

---

Czyli żeby zapisać aktualnego gracza do osobnej zmiennej?

Coś takiego:

//w state
currentPlayerId:0

//w getterach
  getters:{
      currentPlayer: state => { //stara wersja
          return state.players.find((el)=>el.current==true)
      },
      currentPlayerV2: state => { //nowa
          return state.players[state.currentPlayerId]
      },
      currentField: (state, getters) => {
    return state.fields[getters.currentPlayer.field];
  }

 

Answer 2

A to nie zadziała?

let player = this.$store.state.players.find((el)=>el.current==true);
player.field += val;
player.field = player.field % 26;