我们应该使用 v-model 来修改 Vuex 存储吗？

Question

您好，我是 Vue 的初学者，但我确实遇到了一个困扰我的问题。我想知道我们应该使用 v-model 指令来修改 vuex 商店吗？ Vuex 说我们应该只通过突变来修改 vuex 存储，但是 v-model 使一切变得更容易和更短。（我问是因为我找不到明确的答案）

原文由 Krzysztof Kaczyński 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

在严格模式下使用 Vuex 时，在属于 Vuex 的状态上使用 v-model 可能有点棘手。

处理它的“Vuex 方式”是绑定 <input> 的值并对输入或更改事件调用操作。

请务必查看该页面上的简单“双向计算属性”示例：

 <input v-model="message">

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

原文由 ceejayoz 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

我认为这里的任何答案中都没有提到的另一个好选择是使用 vuex-map-fields 。事实上，图书馆作者已经为图书馆的实用性 写了一个非常好的解释。根据其 GitHub 页面，要使用该库，您可以执行以下操作：

在你的 Vuex Store 中，你可以有一个类似这样的代码片段：

 import Vue from 'vue';
import Vuex from 'vuex';

import { getField, updateField } from 'vuex-map-fields';

Vue.use(Vuex);

export default new Vuex.Store({
  // ...
  modules: {
    fooModule: {
      namespaced: true,
      state: {
        foo: '',
      },
      getters: {
        getField,
      },
      mutations: {
        updateField,
      },
    },
  },
});

在您的组件代码中，您可以使用以下内容：

 <template>
  <div id="app">
    <input v-model="foo">
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields';

export default {
  computed: {
    // `fooModule` is the name of the Vuex module.
    ...mapFields('fooModule', ['foo']),
  },
};
</script>

我在这个答案的第一句话中链接到的库的 GitHub 存储库中显示了各种用例的其他示例。

原文由 Raj 发布，翻译遵循 CC BY-SA 4.0 许可协议