如何使用Vuejs访问mapAction方法

Question

问候，

我想知道如何访问mapActions中的logOut函数，我不明白的是，有了logIn函数，当我提到它时，它对我有效，但有了logOut no的函数。

以下是错误：未捕获引用错误：未定义logOut

在这里我留下代码：

<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我收到此错误：未捕获类型错误：无法设置未定义的属性"data">此错误指向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);
}
}
}

突变.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将是未定义的。