I am trying to add songs that i am searching for to my own state in my own playlist. This is my store file:
import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import VueAxios from "vue-axios";
Vue.use(Vuex);
Vue.use(VueAxios, axios);
Vue.use(Vuex);
export default new Vuex.Store({
state: {
player: {
isPlaying: false,
showVideo: false,
},
allPlaylists: {
playlists: [],
},
searchList: {
id: null,
search: "",
songs: [],
},
content: [],
results: [],
currentsong: "",
currentPlayList: [],
},
getters: {
getIsPlaying: (state) => {
return state.isPlaying;
},
getShowVideo: (state) => {
return state.showVideo;
},
getCurrentSong: (state) => {
return state.currentSong;
},
getCurrentPlaylist: (state) => {
return state.currentPlaylist;
},
getAllPlaylists: (state) => {
return state.currentPlaylist;
},
},
mutations: {
setIsPlaying: (state, status) => {
state.isPlaying = status;
},
setShowVideo: (state, status) => {
state.showVideo = status;
},
SetSong(state, song) {
state.currentsong = song;
},
addSong(state, currentPlayList) {
state.currentPlayList = currentPlayList;
console.log(currentPlayList);
},
setAllPlaylists: (state, status) => {
state.allPlaylists = status;
},
returnResults: (state, results) => {
state.results = results;
console.log(results);
},
},
actions: {
/*
TODO: Build API wrapper to call api requests
import API from '@api/index.js'
source-folder/api/index.js
*/
// USER API
// 3000:/api/users
getUserStatus(context) {
// fetch user and load into state
},
loginUser(contex) {
// delete user and load into state
},
registerUser(contex) {
// register user and load into state
},
logoutUser(contex) {
// logout user and load into state
},
// PLAYLIST API
// 3000:/api/playlists
getPlaylist(playlistId) {
// fetch playlists and load into state
// 3000:/api/playlists/:id
},
async getSearchResults({ commit }, query) {
const res = await axios.get(`/api/yt/songs/${query}`);
// Execute the mutation which receive the data and pass to the state
commit("returnResults", res.data.content);
},
addPlaylist(playlistId) {
// add playlist and load into state
},
deletePlaylist(playlistId) {
// delete playlist and load into state
},
// SONGS API
// 3000:/api/playlists
getSongs(songId) {
// fetch songs and load into state
},
addSong(songId) {
// add song here load into state
},
deleteSong(songId) {
// delete song and load into state
},
},
});
Then in my search field i search for a song then i get search results in my searchresults compononent and i have a button where i can add the song to my state.
<template>
<v-main>
<v-card class="mx-auto" max-width="344" outlined>
<v-row align="center" justify="space-around">
<div>
<h1>Playlist</h1>
<ul>
<li
@click="setSong(song.videoId)"
v-for="song in content"
:key="song.videoId"
>
{{ song.name }}
<v-btn tile color="success" @click="addSong(song.videoId)">
<v-icon left>
mdi-pencil
</v-icon>
</v-btn>
</li>
</ul>
<!-- -->
</div>
</v-row>
</v-card>
</v-main>
</template>
<script>
export default {
name: "SearchResults",
computed: {
content() {
return this.$store.state.results;
},
},
methods: {
setSong(videoId) {
this.$store.commit("SetSong", videoId);
},
addSong(videoId) {
this.$store.commit("addSong", videoId);
},
},
// addSong(videoId) {
// this.$store.commit("AddSong", videoId);
// },
};
I want to display every song that i have added to currentplaylist
<template>
<v-list class="pl-14" shaped>
<v-list-item v-for="song in content"
:key="song.videoId"
>
{{ song.name }}
<v-list-item-content>
<v-list-item-title> {{ song.name }} </v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</template>
<script>
import { mapMutations, mapGetters, mapActions } from "vuex";
export default {
name: "Playlist",
computed: {
content() {
return this.$store.state.currentPlayList;
},
},
};
</script>
<style scoped>