我有一个关于使用 vuex-map-fields
映射计算字段的问题。
我有一个 Vuex 商店:
export const state = () => ({
countryCode: null,
phoneNumber: null,
phone: null
})
表单有两个输入字段:countryCode
和phoneNumber
。我希望 phone
值将根据 countryCode
和 phoneNumber
进行更新。
如何解决vuex-map-fields
的问题?
最佳答案
基于vuex-map-fields
README ,编辑您的商店设置以使用 vuex-map-fields
中的 getField
getter 和 updateField
突变:
// store.js
import { getField, updateField } from 'vuex-map-fields'
export default new Vuex.Store({
//...
state: {
countryCode: '',
phoneNumber: '',
},
getters: {
getField,
},
mutations: {
updateField,
},
})
...然后您的组件将使用 vuex-map-fields
中的 mapFields
:
<template>
<div id="app">
<input v-model="countryCode">
<input v-model="phoneNumber">
</div>
</template>
<script>
import { mapFields } from 'vuex-map-fields';
export default {
//...
computed: {
...mapFields([
'countryCode',
'phoneNumber',
]),
},
}
</script>
要从其他两个状态变量计算phone
,您可以使用Vuex getter
格式化它:
// store.js
const store = new Vuex.Store({
//...
getters: {
phone: state => `${state.countryCode}-${state.phoneNumber}`
},
})
...然后使用 Vuex's mapGetter
在您的组件中显示 phone
:
<template>
<div>
<pre>phone: {{ phone }}</pre>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
//...
computed: {
...mapGetters(['phone'])
}
}
</script>
总而言之,您的组件看起来类似于:
<template>
<div>
<input v-model="countryCode" type="number">
<pre>countryCode: {{ countryCode }}</pre>
<input v-model="phoneNumber" type="tel">
<pre>phoneNumber: {{ phoneNumber }}</pre>
<pre>phone: {{ phone }}</pre>
</div>
</template>
<script>
import { mapFields } from 'vuex-map-fields'
import { mapGetters } from 'vuex'
export default {
computed: {
...mapFields(['countryCode', 'phoneNumber']),
...mapGetters(['phone'])
}
}
</script>
关于vue.js - 使用 vuex-map-fields 映射计算字段,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/59816698/