How to access a mapAction method using Vuejs?

Question

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:%s\ntoken:%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;
  }
}

Answer 1

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.