Javascript 如何优雅地使用v-model和Vuex商店？

我正在寻找一种干净的方式来使用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 helpers来避免样板代码（这个.$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 helpers功能和v-model的优势协同工作呢？

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

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

没有v型

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

<input :value="type" @input="setType($event.target.value)">

---

我最终发现最具可读性的方法如下：

import { createNamespacedHelpers } from 'vuex'

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

这样使用：

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

没有v型模型

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

<input :value="type" @input="setType($event.target.value)">

试试这个

// 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;
 }, {})
);

在component.vue文件中

  import { mapSetter  } from 'path/to/utils/vuex.js';
  ...

  export default {
    name: 'ComponentName',
    computed: {
      ...mapSetter(
        mapState({
          result: ({ ITEMS }) => ITEMS.result,
          total: ({ ITEMS }) => ITEMS.total,
          current: ({ ITEMS }) => ITEMS.page,
          limit: ({ ITEMS }) => ITEMS.limit,
        }),
        {
          limit(payload) {
            this.$store.dispatch({ type: TYPES.SET_LIMIT, payload });
          },
        },
      )
    },
  }

---

现在，v-model绑定应该可以工作了。

为什么不在组件中执行

：value=“computedValue”

&

@input=“setterFunction”

？似乎可以创建一个助手函数，生成可设置的计算，并像使用

…mapState

一样使用它。