Как сделать форму с использованием vuex?

Question

[testopikachu]

Как сделать форму с использованием 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.

Answer 1

[Алексей Ярков]

я хочу что бы состояние хранилища менялось только после сабмита формы

Тогда делайте локальную модель и после сабмита вызывайте мутацию с этой моделью.

в computed больше ничего нет, а я получаю ошибку Cannot read property 'title' of undefined

Смотри пункт первый ))

Comments

[testopikachu]

А как быть с серверным рендерингом vue ssr?
Делая локальную модель, я не могу сохранить состояние компонента. Как сохранять состояние компонентов в vue ssr?

[Klein Maximus]

testopikachu, Вам серверный рендеринг потребуется только для первоначального получения инициализированных данных.