Liaison bidirectionnelle de propriétés calculées avec des mappeurs

Question

J'utilise vuex dans mon projet Vue 2.

J'ai cet élément HTML et j'essaie de mettre en œuvre une liaison bidirectionnelle :

<input v-model="message">

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

à l'intérieur de get et set, je veux utiliser des mappers pour que le code ait l'air plus propre :

computed: {
  message: {
    get () {
      return ...mapState("obj", ["message"])
    },
    set (value) {
      ...mapMutations("obj/updateMessage", value)
    }
  }
}

Mais j'obtiens des erreurs sur deux lignes :

return ...mapState("obj", ["message"])   -   Expression expected.

...mapMutations("obj/updateMessage", value) - Declaration or statement expected.

Comment puis-je utiliser des mappers dans les fonctions get et set ?

UPDATE : mapMutations et mapState sont importés dans le composant.

Answer 1

Vous devrez d'abord les importer, comme vous l'avez fait
import { mapState, mapActions } from 'vuex'
Il s'agit d'actions d'importation et non de mutations. En effet, seules les actions sont asynchrones et le flux devrait toujours être dispatch a action > commit a mutation > state is updated .

Ensuite, branchez-les là où ils doivent l'être

computed: {
  ...mapState('obj', ['message']),
  // other computed properties ...
}

methods: {
  ...mapActions('obj', ['updateMessage']),
  // other methods ...
}

Vient ensuite la partie intéressante

computed: {
  message: {
    get () {
      const cloneDeepMessage = cloneDeep(this.message)
      // you could make some destructuring here like >> const { id, title, description } = cloneDeepMessage
      return cloneDeepMessage // or if destructured some fields >> return { id, title, description }
    },
    set (value) {
      this.updateMessage(value)
    }
  }
}

Comme vous pouvez le constater, je vous recommande également de import cloneDeep from 'lodash/cloneDeep' pour éviter de modifier l'état directement grâce à cloneDeep lors de l'accès à votre état.
C'est le genre d'avertissement que la Mode strict de Vuex C'est pourquoi je recommande de ne l'activer qu'en phase de développement.

La documentation officielle n'est pas très explicite à ce sujet (il faut en lire plusieurs parties et les mélanger), mais c'est en fait une bonne façon de faire, selon moi.