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？

解决方法:

问题(可能是您收集到的)是,在此属性可用之前就已经构造了计算属性,但是您可以通过推迟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/>"
});

标签：vuex,vue-js,javascript
来源： https://codeday.me/bug/20191211/2106134.html