move to pina for more reliability
This commit is contained in:
parent
7d739b1d1a
commit
43e6c6d620
|
@ -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)
|
||||
})
|
||||
```
|
||||
|
|
|
@ -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 }
|
||||
)
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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)
|
||||
},
|
||||
},
|
||||
})
|
Loading…
Reference in New Issue