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

Question

我有一般組件和vuex商店。 為了便於雙向綁定，我使用了vuex-map-fields 。 在組件方面，它有mapFields方法，可以創建帶有突變的get和set。 我想用帶有props vuex模塊傳遞namespace但似乎不可能。

<my-component namespace="ns1" />

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

當然，沒有辦法以this方式使用this ，所以我們無法訪問道具。 在這種情況下，如何將命名空間指定為prop？

Answer 1

問題（如你可能聚集）是計算性能構造之前， this是可用的，但是你可以通過推遲的決議繞過它this.namespace財產直到計算屬性被稱為（這將不會發生，直到組件建設完成）。

該概念基於這篇文章即時生成計算屬性 。

基本模式是使用帶有get()和set()

computed: {
  foo: {
    get() { this.namespace...},
    set() { this.namespace...},
  }
}

但是不是在組件中全部輸入，我們可以基於vuex-map-fields mapFields()函數創建一個輔助函數（請參閱此處的原始函數）。

vuex-map-fields附帶的normalizeNamespace()函數不支持我們想要做的事情，因此我們刪除它並假設總是傳入命名空間（並且存儲模塊使用標准的getField和updateField函數）。

我已經適應了vuex地圖字段Codesandbox例子之一在這里 。
請注意，命名空間是data而不是props ，但props也應該起作用。

模板

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