vue2.7 + pinia , state is not reactive

[zhangsha1213]

• vue 2.7.16
• pinia 2.0.36

I init state in store.js, code is here

// store.ts

export const useSearchStore = defineStore('search', {
       state: (): IState => {
           return {
               startTime: 0
           }
       }
})

// Index.vue

<template>
<div>{{store.startTime}}</div>
</template>
<script setup>
import { useSearchStore } from 'store.ts'

const store = useSearchStore() 

setTimeout(() => {
  store.startTime = 444 // the view not update
  store.startTime.value = 444 
   // updated，but console is show tips：eruda.js:8 [Vue warn]: toRefs() expects a reactive object but received a plain one.

})
</script>

My writing method is based on the example given on the official website, but it still doesn't work, and it keeps reminding me that the incoming state is not reactive. Does pinia really support vue2.7? Can you give me the correct opinion, please

[posva]

Here is a working repository https://github.com/piniajs/example-vue-2-vite

[zhangsha1213]

It seem to not work
npm run dev , ouput error message:
✘ [ERROR] No matching export in "node_modules/vue-demi/lib/index.mjs" for import "hasInjectionContext"

This version of vue-demi does not export hasInjectionContext method, so I modified the version of pinia to 2.0.36, but it still cannot be used

[posva]

You need to update your dependencies. Namely Vue-demi
The GitHub repository does work, it even has tests

[zhangsha1213]

I have already installed [email protected], the error message is output on vue-demi0.14.7

This example project not has package-lock.json, so vue-demi which version should install?

I don't know why it can't working , try downgrade pinia version both not work

[posva]

You shouldn't downgrade pinia and you should use a lock. Use tools like pnpm dedupe, pnpm why and their equivalents for your package manager to debug this. The error you see comes from having an outdated version of vue-demi. Good luck!

[zhangsha1213]

I have another question，code is here

  state: (): IState => {
    return {
      videoMap: {}
    }
  }

// action
updateVideoMap (token) {
  this.videoMap[token] = {id: 23232,  videoUrl: 'xxx'}
}

// vue component
const token = ref<1>
const videoInfo = computed(() => {
   return store.videoMap[token.value]
})

but the computed not work, I found the videoMap is not reactive, So I should how to make it