你好,我是Vue的初学者,确实有一个困扰我的问题。 我想知道我们应该使用v-model指令来修改vuex存储吗? Vuex表示,我们仅应通过突变来修改vuex存储,但是v-model可以使一切变得更容易和更短。(我问是因为我找不到明确的答案)
答案 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 来表示数组,以及我如何在里面做对象。
而且,您还需要在商店中启动此用户对象,并带有空字段。