Question

我正在寻找一种使用v-model和vuex存储的干净方法。

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

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

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模型的情况下，我发现助手无法使用。我无法使用mapState，因此无法使用createNamespacedHelpers。

所以：我如何利用Vuex帮助器功能和v模型的优势来协同工作？

Answer 1

我终于找到了最可读的方式如下：

<dependencyManagement>
      <dependencies>
        <dependency>
          <groupId>org.springframework.cloud</groupId>
          <artifactId>spring-cloud-dependencies</artifactId>
          <version>Edgware.SR5</version>
           <type>pom</type>
          <scope>import</scope>
        </dependency>
      </dependencies>
    </dependencyManagement>

用于这样的：

import { createNamespacedHelpers } from 'vuex'

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

和无V-模型

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

Answer 2

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

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

没有v模型

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

Answer 3

尝试一下。

public class Car {

    @ApiModelProperty(value = "id", required = true)
    long id;

    @ApiModelProperty(value = "wheels", required = true)
    int wheels;

    @ApiModelProperty(value = "name", hidden = true)
    String name;

    @ApiModelProperty(value = "type", hidden = true)
    String type;

    @ApiModelProperty(value = "canFly", hidden = true)
    boolean canFly;
}

在您的component.vue文件中

// in some utils/vuex.js file 
export const mapSetter = (state, setters = {}) => (
  Object.keys(state).reduce((acc, stateName) => {
    acc[stateName] = {
      get: state[stateName],
   };
   // check if setter exists
   if (setters[stateName]) {
      acc[stateName].set = setters[stateName];
   }

   return acc;
 }, {})
);

现在v模型绑定应该可以了。

如何优雅地使用v模型和Vuex存储？

3 个答案: