move to pina for more reliability

This commit is contained in:
kolaente 2022-12-08 12:34:15 +01:00
parent 7d739b1d1a
commit 43e6c6d620
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
4 changed files with 30 additions and 12 deletions

View File

@ -5,7 +5,8 @@ This addons provides a `Sources` and `Source` component to show sources.
## Setup
1. Install the addon with your favorite package manager
2. Add it in your frontmatter:
2. Install `pinia` as a dependency with your favorite package manager
3. Add it in your frontmatter:
```
addons:
- slidev-addon-bibliography
@ -15,8 +16,12 @@ addons:
```ts
import { defineAppSetup } from '@slidev/types'
import Bibliography from '../bibliography.json'
import { createPinia } from 'pinia'
const pinia = createPinia()
export default defineAppSetup(({ app }) => {
app.use(pinia)
app.provide('bibliography', Bibliography)
})
```

View File

@ -1,7 +1,10 @@
<script lang="ts" setup>
import { sharedState } from '@slidev/client/state/shared'
import { computed } from '@vue/reactivity'
import { watch } from 'vue';
import { watch } from 'vue'
import { useBibliographyStore } from '../stores/bibliography'
const bibliography = useBibliographyStore()
const props = defineProps({
item: String,
@ -9,22 +12,16 @@ const props = defineProps({
})
const position = computed<number>(() => {
if (!sharedState.sources) {
sharedState.sources = new Set()
}
return [...sharedState.sources].findIndex(i => props.item === i)
return [...bibliography.sources].findIndex(i => props.item === i)
})
watch(
() => props.item,
() => {
if (!sharedState.sources) {
sharedState.sources = new Set()
}
if(!props.item) {
return
}
sharedState.sources.add(props.item)
bibliography.addSource(props.item)
},
{ immediate: true }
)

View File

@ -1,11 +1,12 @@
<script lang="ts" setup>
import { sharedState } from '@slidev/client/state/shared'
import { computed, inject } from 'vue';
import { useBibliographyStore } from '../stores/bibliography'
const bibliography = useBibliographyStore()
const Bibliography = inject('bibliography')
const bib = computed(() => {
return [...sharedState.sources]
return [...bibliography.sources]
.map(key => Bibliography[key])
})
</script>

15
stores/bibliography.ts Normal file
View File

@ -0,0 +1,15 @@
import { defineStore } from 'pinia'
export const useBibliographyStore = defineStore('bibliography', {
state: () => {
return {
sources: new Set(),
}
},
actions: {
addSource(source: string) {
this.sources.add(source)
},
},
})