Как сделать форму с использованием vuex?
У меня есть такой компонент:
<template><div>
<input type="text" v-model="template.title" />
<input type="text" v-model="template.name" />
</div></template>
<script>
export default {
computed: {
template() {
return this.$store.state.templates[this.$route.params.id]
},
},
mounted() {
if(this.$route.params.id) {
return this.$store.dispatch('fetchTemplate', this.$route.params.id)
}
}
}
</script>
И такое хранилище:
mutations: {
setTemplate(state, { id, template }) {
Vue.set(state, id, template)
},
},
actions: {
async fetchTemplate({commit}, id) {
return await axios.get('http://127.0.0.1:8000/api/templates/' + id).then(result => {
const template = result.data
commit('setTemplate', { id, template })
})
},
}
Это же неправильное использование?
Поля формы становятся реактивными и другие компоненты начинают подцеплять title и name по мере ввода, а я хочу чтобы состояние хранилища менялось только после сабмита формы.
Также не понимаю, как быть если я хочу не редактировать существующую запись, а создать новую. В этом случае fetchTemplate не исполняется, в computed больше ничего нет, а я получаю ошибку Cannot read property 'title' of undefined.
