구성 요소에서 vuex 작업을 매핑할 수 없습니다.

구성 요소에서 vuex 작업을 매핑할 수 없습니다.

vuex 작업(특히 하나)을 매핑하려고 하는데 오류가 계속 표시됨Property or method "logout" is not defined on the instance but referenced during render.컴포넌트 코드는 다음과 같습니다.

<template>
  <header id="header">
    <div class="logo">
      <router-link to="/">Vue Authenticate</router-link>
    </div>
    <nav>
      <ul>
         ...
        <li v-if="authenticated" @click="logout">
          Log Out
        </li>
      </ul>
    </nav>
  </header>
</template>

<script>
import { mapGetters, mapActions } from "vuex";

export default {

  computed: {
    ...mapGetters({
      authenticated: "isAuthenticated",
    }),
  },

  mathods: {
    ...mapActions(["logout"]),
  },
};
</script>

그리고 여기 내 것이 있다.store/index.js파일:

import Vue from "vue";
import Vuex from "vuex";
import axios from "axios";
import router from "../router/index.js";

Vue.use(Vuex);

export default new Vuex.Store({

  actions: {

    logout({commit}) {
      localStorage.removeItem("idToken");
      localStorage.removeItem("userId");
      commit("clearData");

      router.push("/")
    }
  },
});

내가 뭘 놓쳤는지 알아?참고로 mapGetters는 완벽하게 동작합니다.버전 3.4.0에서 vuex를 사용하고 있습니다.

'mathods'라고 쓰는 대신 'mathods'라고 쓰는구나methods:

methods: {
   ...mapActions(["logout"]),
},

언급URL : https://stackoverflow.com/questions/61965761/i-could-not-map-my-vuex-actions-in-a-component