频道导航

Vue：如何在mapFields中使用组件prop

2019-12-28 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了Vue：如何在mapFields中使用组件prop ，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

我有常规组件和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？

@H_502_12@最佳答案

问题(可能是您收集到的)是,在此属性可用之前就已经构造了计算属性,但是您可以通过推迟this.namespace属性的解析直到调用了计算属性(直到组件构造完成才发生)来解决它.完成).

该概念基于此帖子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/>"
});

原文链接：https://www.f2er.com/js/531174.html

javascript