Должны ли мы использовать v-модель для модификации магазина Vuex?

Question

Здравствуйте, я новичок в Vue, и у меня есть проблема, которая действительно беспокоит меня.Мне интересно, должны ли мы использовать директиву v-model для изменения хранилища vuex?Vuex говорит, что мы должны изменять хранилище vuex только мутациями, но v-модель делает все проще и короче (я спрашиваю, потому что не смог найти четкого ответа)

Answer 1

https://vuex.vuejs.org/guide/forms.html

При использовании Vuex в строгом режиме может быть немного сложно использовать v-model для части состояния, которая принадлежит Vuex.

«Vuex way» для решения этой проблемы связывает значение <input> и вызывает действие для события ввода или изменения.

Обязательно ознакомьтесь с простым «двусторонним вычисляемым свойством»Пример на этой странице:

<input v-model="message">

computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}

Answer 2

Над решением также могут быть реализованы мутации:

<template>
  <input v-model="message">
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
  computed: {
    ...mapState('message'),
    tab: {
      get() {
        return this.message;
      },
      set(value) {
        this.updateMessage(value);
      }
    }
  },
  methods: {
    ...mapMutations('updateMessage')
  }
};
</script>

Answer 3

Да, вы можете, но это не лучшая практика.

Как указано в документации, состояние должно обновляться только внутри мутации, чтобы сохранить контроль над состоянием.

Но если вы действительно хотитесделать это вы можете с помощью:

v-model="$store.state.yourProperty"