Vuex mapGetters не отображает титилиды

Question

У меня есть приложение Vuex с CLI3, и я тестирую геттеры с парой элементов, но не отображаю их, вот код ниже, все остальное в порядке, но не показаны два заголовка. Модуль todo импортируется нормально в индекс магазина. js и, похоже, никаких других проблем

Todos. Vue

<template>
  <div>
    <h3>Todo</h3>
    <div class="todos">
      <div v-for="todo in allTodos" v-bind:key="todo.id" class="todo">
        {{ todo.title }}
      </div>
    </div>
  </div>
</template>

<script>
// eslint-disable-next-line no-unused-vars
import { mapGetters } from "vuex";
export default {
  name: "Todo",
  computed: mapGetters(["allTodos"])
};
</script>



 /* eslint-disable no-unused-vars */
console.log("Todos Works");
// eslint-disable-next-line no-unused-vars
import axios from "axios";

const state = {
  todos: [
    {
      id: 1,
      title: "Todo One"
    },
    {
      id: 2,
      title: "Todo Two"
    }
  ]
};

const getters = {
  allTodos: state => state.todos
}

(также экспортируется)

Приложение. vue

[enter image description here][1]
    <template>
      <div id="app">
        <div class="container">
          <Todos />
        </div>
      </div>
    </template>

    <script>
    import Todos from "./components/Todos.vue";

    export default {
      name: "App",
      components: {
        // eslint-disable-next-line vue/no-unused-components
        Todos
      }
    };
    </script>


  [1]: https://i.stack.imgur.com/l8nhG.jpg

So just wanting those two titles but not showing. Everything else is fine?

Thanks

Answer 1

Вам чего-то не хватает, вам нужно использовать синтаксис с mapGetters.

<script>
import { mapGetters } from 'vuex'
export default {
  name: 'Todo',
  computed: {
    ...mapGetters(['allTodos'])
  }
}
</script>

Ссылка