Vuejs를 사용하여 mapAction 메서드에 액세스하는 방법은 무엇입니까?

Vuejs를 사용하여 mapAction 메서드에 액세스하는 방법은 무엇입니까?

안부 전해요,

mapActions에서 제공하는 logOut 함수에 어떻게 액세스할 수 있는지 알고 싶습니다. 제가 이해할 수 없는 것은 어떻게 가능한지, 제가 참조할 때 logIn 함수는 저에게 작동하지만 logOut no 함수는 작동한다는 것입니다.

다음은 오류입니다.Uncaught ReferenceError: 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 다음 오류가 발생합니다.Uncaught TypeError: 정의되지 않은 속성 '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:%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);
    }
}
}

돌연변이.js

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

데이터에 화살표가 아닌 함수를 사용하도록 변경하는 경우click올바른 Vue 인스턴스에 액세스할 수 있습니다.화살표 기능을 사용하면,this당신이 기대하는 Vue 인스턴스가 아닙니다.this.logOut정의되지 않습니다.

언급URL : https://stackoverflow.com/questions/53243396/how-to-access-a-mapaction-method-using-vuejs