我们应该使用v模型修改Vuex存储吗?

时间:2019-02-28 14:37:56

标签: javascript vue.js vuejs2 vuex v-model

你好,我是Vue的初学者,确实有一个困扰我的问题。 我想知道我们应该使用v-model指令来修改vuex存储吗? Vuex表示,我们仅应通过突变来修改vuex存储,但是v-model可以使一切变得更容易和更短。(我问是因为我找不到明确的答案)

6 个答案:

答案 0 :(得分:4)

我认为这里没有任何答案提到的另一个不错的选择是使用vuex-map-fields。实际上,图书馆作者对图书馆的有用性有written a very nice explanation。按照其GitHub页面,要使用该库,您可以执行以下操作:

在Vuex商店中,您可以有一个类似于以下的代码段:

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存储库中显示。

答案 1 :(得分:3)

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)
    }
  }
}

答案 2 :(得分:2)

对此,我的解决方案是使用吸气剂设置value@input来调用突变。

<input
  type="text"
  :value="$store.getters.apartmentStreet"
  @input="value => $store.commit('apartmentValue', { handle: 'street', value })"
>

getters.js:

export default {
  apartmentStreet: state => state.apartment.street,
};

mutations.js

export default {
  apartmentValue(state, payload) {
    let oldValue = state.apartment[payload.handle];
    let newValue = payload.value;
    if (newValue !== oldValue) state.apartment[payload.handle] = payload.value;
  }
};

如果使用此方法,请务必检查您想要的事件。

答案 3 :(得分:1)

是的,但是不是最佳实践。

如文档所述,状态应仅在突变内更新,以保持对状态的控制。

但是,如果您真的想这样做,可以使用:

v-model="$store.state.yourProperty"

答案 4 :(得分:0)

上述解决方案也可以实现以下突变:

<template>
  <input v-model="message">
</template>

<script>
import { mapMutations, mapState } from 'vuex';

export default {
  computed: {
    ...mapState({messageFromStore: 'message'}),
    message: {
      get() {
        return this.messageFromStore;
      },
      set(value) {
        this.updateMessage(value);
      }
    }
  },
  methods: {
    ...mapMutations('updateMessage')
  }
};
</script>

答案 5 :(得分:0)

我使用这个解决方案。

    key_list.apply {
        layoutManager = LinearLayoutManager(context)
        keyListAdapter = KeyListAdapter(keyListViewActions)
        adapter = keyListAdapter
    }

然后你只是经常使用 v-model。 从商店制作对象的深层副本很重要,比如使用 map 来表示数组,以及我如何在里面做对象。

而且,您还需要在商店中启动此用户对象,并带有空字段。