No estoy definido cuando trato de representar los valores de la propiedad calculada en la plantilla usando su propiedad {{todo[0]['title']}} pero {{todo[0]]}} representa los objetos completos. Quiero poder renderizar un todo usando su propiedad. Cualquier ayuda es bien apreciada
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>Si desea mostrar el primer elemento de la matriz, intente con el siguiente fragmento:
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>