I am currently in the process of upgrading a Vue 2 application to Vue 3. The transition has been smooth so far, however, I am encountering an issue where the templates are not updating based on the Pinia state. I have searched through other Stack Overflow questions regarding this matter but have been unable to find a solution.
Below are my components (parent and child) and store - Please note that I am using the options API
// Parent
<template>
<div class="wrapper">
<ActionButtonGroup />
</div>
</template>
<script>
import { useActionStore } from '@/stores/ActionStore';
import ActionButtonGroup from './components/ActionButtonGroup/main.vue';
export default {
name: 'ActionsParent'
components: {
ActionButtonGroup,
},
created() {
this.loadActions();
},
methods: {
loadActions() {
useActionStore().loadActions();
},
}
}
// Child
<template>
<div class="action-buttons d--f ai--c">
<Spinner class="ml-3" v-if="loading" />
</div>
</template>
<script>
import { mapState } from 'pinia';
import { useActionStore } from '@/stores/ActionStore';
import { Spinner } from '@/components/index';
export default {
name: 'ActionButtonGroup',
components: {
Spinner,
},
computed: {
...mapState(useActionStore, ['loading']),
}
}
</script>
// Store
import { ActionApi } from '@/api/index';
export const useActionStore = defineStore('Action', {
state: () => {
return {
loading: false,
};
},
actions: {
async loadActions() {
this.loading = true;
await this.fetchActions();
this.loading = false;
},
async fetchActions(id) {
const actions = await ActionApi.fetchActions();
return actions;
},
}
}
I have also attempted using a setup function in the child component, but unfortunately, it did not resolve the issue:
setup() {
const store = useActionStore();
const loading = computed(() => store.loading);
return {
loading
}
},