我有这个视图模型，所有代码都有效
@connectTo<State>({
selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('games')),
target: 'games',
})
@connectTo<State>({
selector: (store) => store.state.pipe(pluck('domain')).pipe(pluck('myGames')),
target: 'myGames',
})
@autoinject()
@customElement('games')
export default class Games {
private static readonly ADD_TO_MYGAMES = 'addToMyGames';
@bindable() games: Game[] = [];
myGames: Game[] = [];
constructor(
private readonly store: Store<State>,
) {
store.registerAction(Games.ADD_TO_MYGAMES, myGamesState);
}
available(game: Game): boolean {
console.log("available", game);
return !!this.myGames.find((i) => _.isEqual(i, game));
}
addGame(game: Game) {
this.store.dispatch(Games.ADD_TO_MYGAMES, game);
}
}
const myGamesState = async (current: State, game: Game) => {
console.log(game);
return produce(current, state => {
state.domain.myGames.push(game);
});
}
问题是当 myGames 作为新游戏时，视图不会刷新available
<template bindable="games">
<div class="columns">
<ul class="column">
<li repeat.for="game of games" class="level">
<button class="button level-item is-fullwidth ${available(game) ? 'is-success' : ''}" click.delegate="addGame(game)"
disabled.bind="available(game)">
${game.name}
</button>
</li>
</ul>
</div>
</template>
我应该如何解决这个问题？