Question

我有一个带有CLI3的Vuex应用程序，并用几个项目测试了吸气剂，但没有显示它们，这是下面的代码，其他都可以，但是没有显示两个标题。将todo模块导入到商店index.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
}

（也已导出）

App.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

您丢失了一些东西，需要将spread syntax与mapGetters一起使用。

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

Reference

Vuex mapGetters不显示标题

1 个答案: