Я только изучаю vue и хотел сделать обычный todo лист с использованием компонентов quasar и vuex, но при попытке получить store в консоли выдаёт ошибку, что store не был найден.
Делал всё согласно документации quasar и vue, но так и не могу понять в чём именно ошибка
ToDoCard.vue
<template lang="">
<q-card flat bordered class="my-card bg-grey-1">
<q-card-section>
<div class="row items-center no-wrap">
<div class="col">
<div class="text-h6">Our Planet</div>
<div class="text-subtitle2">by John Doe</div>
</div>
<div class="col-auto">
<q-btn color="grey-7" round flat icon="more_vert">
<q-menu cover auto-close>
<q-list>
<q-item clickable>
<q-item-section>Remove Card</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>Send Feedback</q-item-section>
</q-item>
<q-item clickable>
<q-item-section>Share</q-item-section>
</q-item>
</q-list>
</q-menu>
</q-btn>
</div>
</div>
</q-card-section>
<q-card-section>
</q-card-section>
<q-card-section>
</q-card-section>
<q-separator></q-separator>
<q-card-actions>
<q-btn flat>Action 131</q-btn>
<q-btn flat>Action 2</q-btn>
</q-card-actions>
</q-card>
</template>
<script>
import { computed } from '@vue/runtime-core'
import { useStore } from "vuex"
export default {
setup() {
const store = useStore()
const tasks = computed(() => store.state.todo.tasks)
return {
tasks
}
}
}
</script>
<style lang="">
</style>
store index.js
import { store } from 'quasar/wrappers'
import { createStore } from 'vuex'
import todo from './todo'
export default store(function () {
const Store = createStore({
modules: {
todo
},
strict: process.env.DEBUGGING
})
return Store
})
todo state.js
export default function () {
return {
tasks: {
id: 1,
title: 'Some title',
description: 'Some description'
}
}
}
App.vue
<template>
<router-view />
</template>
<script>
import { defineComponent } from 'vue'
import Vuex from 'vuex'
export default defineComponent({
name: 'App'
})
</script>
Заранее спасибо за помощь.