Odtnhj

Regards,

I would like to know how I can access the logOut function that comes from mapActions,
What I do not understand is how it is possible, that with the logIn function when I refer to it, it works for me but with the function of logOut no.

Here is the error: Uncaught ReferenceError: logOut is not defined

Here I leave the code:

 <template>
 <div class="home">
 <v-card height="200px" flat dark app>
 <div class="headline text-xs-center pa-5">
 Active: bottomNav 
 </div>
 <v-bottom-nav :active.sync="bottomNav" :value="true" absolute color="transparent">
 <v-btn color="teal" flat value="messages">
 <span>Messages</span>
 <v-icon>chat</v-icon>
 </v-btn>

 <v-btn color="teal" flat value="notifications">
 <span>Notifications</span>
 <v-icon>notifications</v-icon>
 </v-btn>

 <v-btn color="red" @click.prevent="logIn()" flat value="logIn">
 <span>LogIn</span>
 <v-icon>whatshot</v-icon>
 </v-btn>

 <v-menu offset-y origin="center center" :nudge-bottom="10" transition="scale-transition">
 <v-btn icon large flat slot="activator">
 <v-avatar size="30px">
 <img src="../assets/logo.png" alt="user-logo"/>
 </v-avatar>
 </v-btn>
 <v-list class="pa-0">
 <v-list-tile v-for="(item , index) in items"
 :to="!item.href ? name: item.name : null" 
 :href="item.href" 
 @click.prevent="item.click"
 ripple="ripple"
 :disabled="item.disabled" 
 :target="item.target" 
 rel="noopener" 
 :key="index"
 ref="myBtn"
 >
 <v-list-tile-action v-if="item.icon">
 <v-icon> item.icon </v-icon>
 </v-list-tile-action>
 <v-list-tile-content>
 <v-list-tile-title> item.title </v-list-tile-title>
 </v-list-tile-content>
 </v-list-tile>
 </v-list>
 </v-menu>
 </v-bottom-nav>
</v-card>

<script>
 import mapActions, mapState from 'vuex';

 export default 
 name: 'home',
 computed: mapState(['data' , 'loading']),
 data()
 return
 bottomNav: 'LogIn',
 items: [
 
 icon: 'account_circle',
 href: '#',
 title: 'Profile',
 click: ''
 ,
 
 icon: 'settings',
 href: '#',
 title: 'Settings',
 click: '' 
 ,
 
 icon: 'fullscreen_exit',
 href: '#',
 title: 'Logout',
 click: () =>
 this.logOut();
 
 
 ]
 
,
methods:
 ...mapActions(['logIn' , 'logOut']),
,

 </script>

Actions.js
Im getting this error: Uncaught TypeError: Cannot set property 'data' of undefined this error is pointing to the mutation file in the UPDATE_DATA.

import GROUP_ID from '../config/env';

export const actions = 
logIn(state , commit)
 FB.login((res) =>
 console.log(res);
 if(res.status == "connected")
 state.user.id = res.authResponse.userID;
 state.user.accessToken = res.authResponse.accessToken;

 console.log("user:%sntoken:%s" , state.user.id , state.user.accessToken);

 FB.api('/me' , (res) =>
 this.user.username = res.authResponse.name;
 );

 FB.api(`/$GROUP_ID/feed`,'GET', (res) =>
 if(res && !res.error)
 res['data'].forEach((data) =>
 console.log("api connection => " , data);
 commit('UPDATE_DATA' , data);
 commit('IS_LOADING_DATA' , false);
 );
 
 );
 
 ,scope:'public_profile, email, groups_access_member_info');
,
logOut(state)
 console.log(state.user.accessToken);

 try
 if(FB.getAccessToken() != null) 
 FB.logout(function(res) 
 console.log("User is logged out");
 console.log(res);
 );
 else
 console.log("User is not logged in");
 
 catch(err)
 console.log(err);
 

Mutations.js

export const mutations = 
 UPDATE_DATA(state , payload)
 state.data = payload;
 ,
 IS_LOADING_DATA(state , payload)
 state.loading = payload;
 

If you change to use a non-arrow function in your data click, you'll have access to the correct Vue instance. By using an arrow function, this is not the Vue instance you're expecting and this.logOut will be undefined.