coochie
coochie

Reputation: 69

Component on DOM not updating after pinia store is updated

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

Answers (0)

Related Questions