在 vue 3 veux 中使用计算方法访问对象属性显示未定义

Question

当我尝试呈现计算的值时，我得到了未定义属性在模板中使用其属性 {{todo[0]['title']}} 但 {{todo[0]]}} 呈现整个对象。我希望能够使用它来呈现待办事项属性。非常感谢任何帮助

const {
  createApp,
  ref,
  computed,
  onMounted
} = Vue;
const {
  createStore
} = Vuex;
const store = createStore({
  state: {
    alltodos: []
  },
  mutations: {
    setTodos(state, todo) {
      (state.alltodos) = todo
    }
  },
  getters: {
    allTodoGetters(state) {
      const sta = JSON.parse(JSON.stringify(state));
      return sta
    }
  },
  actions: {
    async fetchTodos({
      commit
    }) {
      const response = await axios.get('https://jsonplaceholder.typicode.com/todos');
      commit('setTodos', response.data);
    },
  }
});
const app = createApp({
  setup() {
    let alltodos = computed(() => store.getters["allTodoGetters"]);
    onMounted(() => {
      store.dispatch('fetchTodos')
    })
    return {
      alltodos
    }
  }
});
app.mount("#app")

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.30/vue.global.min.js"></script>
<script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="app">
  <div v-for="(todo, index)  of alltodos" :key="index">{{todo[0]}}</div>
</div>

Answer 1

如果你想显示数组中的第一项，请尝试像下面的代码片段：

const {
  createApp,
  ref,
  computed,
  onMounted
} = Vue;
const {
  createStore
} = Vuex;
const store = createStore({
  state: {
    alltodos: []
  },
  mutations: {
    setTodos(state, todo) {
      (state.alltodos) = todo
    }
  },
  getters: {
    allTodoGetters(state) {
                                                //  return just the state you want
      const sta = JSON.parse(JSON.stringify(state.alltodos));
      return sta
    }
  },
  actions: {
    async fetchTodos({
      commit
    }) {
      const response = await axios.get('https://jsonplaceholder.typicode.com/todos');
      commit('setTodos', response.data);
    },
  }
});
const app = createApp({
  setup() {
    let alltodos = computed(() => store.getters["allTodoGetters"]);
    onMounted(() => {
      store.dispatch('fetchTodos')
    })
    return {
      alltodos
    }
  }
});
app.mount("#app")

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/3.2.30/vue.global.min.js"></script>
<script src="https://unpkg.com/vuex@4.0.0/dist/vuex.global.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.26.1/axios.min.js" integrity="sha512-bPh3uwgU5qEMipS/VOmRqynnMXGGSRv+72H/N260MQeXZIK4PG48401Bsby9Nq5P5fz7hy5UGNmC/W1Z51h2GQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<div id="app">                           
  <div v-for="(todo, index) in alltodos"  :key="index">
           <!--  show property you want -->
    <div v-for="(property, i) in todo">{{ property }}</div>
  </div>
</div>

在 vue 3 veux 中使用计算方法访问对象属性显示未定义

Access to Object property using computed method in vue 3 veux shows undefined

javascript

vue.js

vuejs3

vuex4

在 vue 3 veux 中使用计算方法访问对象 属性 显示未定义

Access to Object property using computed method in vue 3 veux shows undefined

javascript

vue.js

vuejs3

vuex4

在 vue 3 veux 中使用计算方法访问对象属性显示未定义