时间戳

首页 > 解决方案 > 如何优雅地使用 v-model 和 Vuex store？

javascript - 如何优雅地使用 v-model 和 Vuex store？

问题描述

我寻找一种干净的方式来使用 v-model 和 vuex 商店。

Vuex 提供了几个辅助方法，非常有用，但在与 v-model 一起使用时有点烦人。

我今天使用 v-model 和我的模块化商店的方式就像

computed: {
  type: {
    get() {
      return this.$store.state.mymodule.type;
    },
    set(newValue) {
      this.$store.dispatch('mymodule/setType', newValue)
    }
}

这可行，但我发现更好地利用 vuex 助手来避免样板代码（this.$store，模块名称，...）

好的，所以我首先想摆脱模块名称。Vuex 提供了一个很棒的createNamespacedHelpers，它返回模块化的助手。

让我们使用它：

import { createNamespacedHelpers } from 'vuex'

const { mapState, mapActions } = createNamespacedHelpers('some/nested/module')

所以，好的，我们现在有一个干净的 mapState 和 mapActions 函数，它们是模块专用的。

computed: {
  ...mapState(['type']) // No need here to specify module name :)
}

很酷，但由于 mapState 只有 get 功能，我无法设置调度功能来更新数据......

在使用 v-model 的情况下，我发现助手无法使用。我不能使用 mapState，因此我不能使用 createNamespacedHelpers。

那么：如何利用 Vuex 辅助函数和 v-model 的优势协同工作？

标签： javascriptvue.jsvuexvuex-modules

解决方案

你不能。没有优雅的方法可以将助手与 v-model 结合起来。但是 v-model 只是一个语法糖，所以也许最易读的方法是使用助手

computed: {
  ...mapGetters('path/to/module', ['type'])
},
methods: {
  ...mapActions('path/to/module', ['setType'])
}

没有 v 模型

<input :value="type" @input="setType">

推荐阅读