Use Vuex to load and add notes.
This commit is contained in:
parent
aba92e2025
commit
6aa5105c48
|
@ -19,24 +19,25 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
import { mapState } from 'vuex'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
notes: [
|
||||
{ id: 0, text: 'This is a note' },
|
||||
{ id: 1, text: 'And another one.' }
|
||||
],
|
||||
current: null,
|
||||
content: null
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
addNote() {
|
||||
this.notes.push({ id: this.notes.length, text: this.content })
|
||||
this.$store.commit('ADD_NOTE', {
|
||||
id: this.notes.length,
|
||||
text: this.content
|
||||
})
|
||||
this.content = ''
|
||||
}
|
||||
},
|
||||
computed: {},
|
||||
computed: mapState(['notes']),
|
||||
mounted() {
|
||||
document.addEventListener('keyup', e => {
|
||||
switch (e.code) {
|
||||
|
|
|
@ -1,4 +1,8 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import store from './store/index.js'
|
||||
|
||||
window.app = createApp(App).mount('#app')
|
||||
window.app = createApp(App)
|
||||
.use(store)
|
||||
.use(store)
|
||||
.mount('#app')
|
||||
|
|
|
@ -0,0 +1,23 @@
|
|||
import { createStore } from 'vuex'
|
||||
|
||||
export default createStore({
|
||||
state() {
|
||||
return {
|
||||
notes: [{ id: 1, text: 'A note from the Vuex store!' }]
|
||||
}
|
||||
},
|
||||
mutations: {
|
||||
FETCH_NOTES(state) {
|
||||
state.notes = [
|
||||
{
|
||||
id: 1,
|
||||
text: 'Note loaded via mutation from Vuex!'
|
||||
}
|
||||
]
|
||||
},
|
||||
ADD_NOTE(state, note) {
|
||||
state.notes.push(note)
|
||||
}
|
||||
},
|
||||
actions: {}
|
||||
})
|
Loading…
Reference in New Issue