I'm diving into the world of composition API in Vue and I'm uncertain if my approach is breaking any established patterns.
I have a desire to initialize a variable directly within the composition file:
GameLogic.ts
export default function () {
...
const buildMovieGuessed = (movie: Movie, score: number) => ({ ...movie, score });
const addNewMovieGuessing = (movie: Movie, score: number) => {
// The moviesGuessed variable isn't being set. It remains an empty array in my template
moviesGuessed = [buildMovieGuessed(movie, score), ...moviesGuessed];
currentStep.value += 1;
};
return {
originalMovies,
activeTerm,
currentStep,
activeMovie,
guessingScore,
moviesGuessed,
addNewMovieGuessing,
};
}
Within the Vue component, I make the following call:
GuessMovie.vue
<script lang="ts">
import { defineComponent } from '@vue/composition-api';
import GameLogic from '@/services/composition/game/GameLogic';
import { ValidationObserver } from 'vee-validate';
import BInputWithValidation from '@/components/_buefy/BInputWithValidation.vue';
export default defineComponent({
components: {
ValidationObserver,
BInputWithValidation,
},
setup() {
const {
originalMovies,
activeTerm,
currentStep,
activeMovie,
guessingScore,
moviesGuessed,
addNewMovieGuessing,
} = GameLogic();
return {
originalMovies,
activeTerm,
currentStep,
activeMovie,
guessingScore,
moviesGuessed,
addNewMovieGuessing,
};
},
methods: {
onAddNewMovieGuessingClick() {
// Triggering the action from this point
this.addNewMovieGuessing(this.activeMovie.value, this.guessingScore.value);
},
},
created() {
// @todo: handle the case where there are no movies present
},
});
</script>
Is there a way for me to properly initialize the moviesGuessed variable from within GameLogic.ts so that the logic remains centralized?