Reputation: 69
I'm having a problem with pinia store not hot reloading when changes are made unless I restart the vite server or the refresh the browser manually before the updated items will appear
//ExpenseStore.js
import { defineStore } from 'pinia'
import { ref } from 'vue'
export const useExpenseStore = defineStore('expense', () => {
const id = ref(1)
const transactions = ref([
{ id: id.value++, description: 'Salary', amount: 1000 },
{ id: id.value++, description: 'Rent', amount: -200 },
{ id: id.value++, description: 'Car Payment', amount: -300 }
])
return {
id,
transactions
}
})
main.js
import './assets/main.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
const app = createApp(App)
app.use(router)
app.use(createPinia())
app.mount('#app')
<template>
<div v-for="transaction in expenseStore.transactions" :key="transaction.id">
{{ transaction.id }} : {{ transaction.description }} : ${{ transaction.amount }}
</div>
</template>
<script setup>
import { useExpenseStore } from '@/stores/ExpenseStore'
const expenseStore = useExpenseStore()
</script>
I've tried some of the solutions I saw on some similar questions but they didn't prove to work.
<script setup>
import {useExpenseStore} from '@/stores/ExpenseStore'
import { storeToRefs } from 'pinia'
//First one I saw
const expenseStore = useExpenseStore()
import { computed } from 'vue'
const { transactions } = storeToRefs(expenseStore)
//Another one
const expenseStore = useExpenseStore()
const transactions = computed(() => expenseStore.transactions)
<script>
I've also done
import { defineStore, acceptHMRUpdate } from 'pinia'
export const useExpenseStore = defineStore('expense',() => {
// options...
})
if (import.meta.hot) {
import.meta.hot.accept(acceptHMRUpdate(useExpenseStore, import.meta.hot))
}
None of them worked
I've even changed the whole project setup, created a new one, also changed environment from vscode to google IDX but still no solution.
There's no error whatsoever in the console too
But an older project which I'm worked on about two months ago still works, so I tried to install the same versions of vue,vite and pinia as the old project but still to no avail
Upvotes: 0
Views: 68