如何使用Vuejs访问mapAction方法？

Question

问候，

我想知道如何访问mapActions的logOut函数，但我不了解它是如何实现的，当我引用该函数时，使用logIn函数对我有用，但是使用logOut函数。

这是错误： 未捕获的ReferenceError：未定义注销

我在这里留下代码：

 <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我收到此错误： 未捕获的TypeError：无法设置未定义的属性“数据”，此错误指向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

如果更改为在数据click使用非箭头功能，则可以访问正确的Vue实例。 通过使用箭头功能， this不是您期望的Vue实例，并且this.logOut将是未定义的。