我有常规组件和vuex商店.为了方便地进行双向绑定,我使用vuex-map-fields.在组件方面,它具有mapFields方法,该方法创建带有突变的get& set.
我想通过带有道具的vuex模块传递名称空间,但这似乎是不可能的.
<my-component namespace="ns1" />
// my-component code
export default {
props: ["namespace"],computed: {
...mapFields(??this.namespace??,["attr1","attr2"])
}
}
当然,没有办法以这种方式使用它,因此我们无法使用道具.在这种情况下,如何指定名称空间作为prop？
最佳答案
问题(可能是您收集到的)是,在此属性可用之前就已经构造了计算属性,但是您可以通过推迟this.namespace属性的解析直到调用了计算属性(直到组件构造完成才发生)来解决它.完成).
原文链接：https://www.f2er.com/js/531174.html该概念基于此帖子Generating computed properties on the fly.
基本模式是使用带有get()和set()的计算
computed: {
foo: {
get() { this.namespace...},set() { this.namespace...},}
}
但是我们可以在vuex-map-fields mapFields()函数的基础上创建一个辅助函数(而不是在组件中全部输入)(有关原始信息,请参见here).
vuex-map-fields随附的normalizeNamespace()函数不支持我们要执行的操作,因此我们将其删除,并假定始终传入名称空间(并且存储模块使用标准的getField和updateField函数).
我改编了vuex-map-fields CodesandBox示例here之一.
请注意,命名空间是在数据中,而不是为方便起见而使用道具,但道具也应该起作用.
模板
<template>
<div id="app">
<div>
<label>foo </label> <input v-model="foo" /> <span> {{ foo }}</span>
</div>
<br />
<div>
<label>bar </label> <input v-model="bar" /> <span> {{ bar }}</span>
</div>
</div>
</template>
帮手
<script>
const mapFields2 = (namespaceProp,fields) => {
return Object.keys(fields).reduce((prev,key) => {
const path = fields[key];
const field = {
get() {
const namespace = this[namespaceProp];
const getterPath = `${namespace}/getField`;
return this.$store.getters[getterPath](path);
},set(value) {
const namespace = this[namespaceProp];
const mutationPath = `${namespace}/updateField`;
this.$store.commit(mutationPath,{ path,value });
}
};
prev[key] = field;
return prev;
},{});
};
export default {
name: "App",data() {
return {
nsProp: "fooModule"
};
},computed: {
...mapFields2("nsProp",{ foo: "foo",bar: "bar" })
}
};
</script>
商店
import Vue from "vue";
import Vuex from "vuex";
import { getField,updateField } from "vuex-map-fields";
import App from "./App";
Vue.use(Vuex);
Vue.config.productionTip = false;
const store = new Vuex.Store({
modules: {
fooModule: {
namespaced: true,state: {
foo: "initial foo value",bar: "initail bar value"
},getters: {
getField
},mutations: {
updateField
}
}
}
});
new Vue({
el: "#app",components: { App },store,template: "<App/>"
});
