我无法在组件中映射我的 vuex 操作答案

【问题标题】：I could not map my vuex actions in a component我无法在组件中映射我的 vuex 操作
【发布时间】：2020-05-23 00:11:11
【问题描述】：

我正在尝试映射我的 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。

【问题讨论】：

标签： vue.js vuex

【解决方案1】：

你写的是“数学”而不是methods：

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

【讨论】：