Javascript Vue：如何在mapFields中使用组件道具

我有通用组件和vuex商店。为了便于双向绑定，我使用。在组件端，它有

mapFields

方法，该方法创建带有突变的get&set。 我想用

道具从vuex模块传递
名称空间
，但这似乎是不可能的

<my-component namespace="ns1" />

// my-component code
export default {
  props: ["namespace"],
  computed: {
    ...mapFields(??this.namespace??, ["attr1", "attr2"])
  }
}


//我的组件代码
导出默认值{
道具：[“名称空间”]，
计算：{
…映射字段（？？this.namespace？？，[“attr1”，“attr2”]）
}
}

当然，没有办法以这种方式使用
这个
，因此我们无法使用道具。在这种情况下，如何将名称空间指定为prop？
问题（正如您可能收集到的）是，计算属性是在
this
可用之前构造的，但您可以通过将
this.namespace
属性的解析推迟到调用computed属性来绕过它（在组件构建完成之前不会发生这种情况）

这个概念是基于这篇文章的

基本模式是使用带有
get（）
和
set（）

计算：{
傅：{
get（）{this.namespace…}，
set（）{this.namespace…}，
}
}

但是我们可以基于vuex map fields
mapFields（）
函数创建一个助手函数，而不是在组件中键入所有内容（请参见原始内容）

vuex映射字段随附的
normalizeNamespace（）
函数不支持我们想要执行的操作，因此我们将其删除，并假设名称空间始终传入（并且存储模块使用标准的
getField
和
updateField
函数）

我已经改编了一个vuex映射字段代码沙盒示例。

注意，名称空间位于
data
中，而不是
props
中，以保持一致性，但是
props
也应该起作用

模板

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/>"
});


foo{{foo}


bar{{bar}

助手


常量mapFields2=（namespaceProp，字段）=>{
返回对象。键（字段）。减少（（上一个，键）=>{
常量路径=字段[键]；
常量字段={
得到（）{
const namespace=此[namespaceProp]；
常量getterPath=`${namespace}/getField`；
返回此。$store.getters[getterPath]（路径）；
},
设置（值）{
const namespace=此[namespaceProp]；
常量mutationPath=`${namespace}/updateField`；
这个.$store.commit（mutationPath，{path，value}）；
}
};
prev[键]=字段；
返回上一个；
}, {});
};
导出默认值{
名称：“应用程序”，
数据（）{
返回{
nsProp：“FoodModule”
};
},
计算：{
…mapFields2（“nsProp”，{foo:foo，bar:bar}）
}
};

商店

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/>"
});

从“Vue”导入Vue；
从“Vuex”导入Vuex；
从“vuex映射字段”导入{getField，updateField}；
从“/App”导入应用程序；
Vue.use（Vuex）；
Vue.config.productionTip=false；
const store=新的Vuex.store({
模块：{
食品模块：{
名称空间：对，
声明：{
foo：“初始foo值”，
条：“初始条值”
},
吸气剂：{
格特菲尔德
},
突变：{
更新字段
}
}
}
});
新Vue({
el:“应用程序”，
组件：{App}，
商店，
模板：“”
});