我无法在组件中映射我的vuex动作。

Question

我试图映射我的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。

Answer 1

你写的是 "mathods "而不是 "mathods"。methods:

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