Vue: mapFields 내의 컴포넌트 프로포트를 사용하는 방법

Vue: mapFields 내의 컴포넌트 프로포트를 사용하는 방법

저는 일반 부품과 Vuex 스토어를 가지고 있습니다.간단한 양방향 바인딩을 위해 vuex-map-fields를 사용합니다.컴포넌트 측에는mapFields돌연변이를 사용하여 get&set을 생성하는 메서드.합격하고 싶다namespacevuex 모듈에서 사용props불가능할 것 같아요.

<my-component namespace="ns1" />

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

물론 사용할 방법은 없습니다.this그런 식으로 해서 소품을 구할 수 없어요.이 경우 네임스페이스를 프로펠러로 지정하려면 어떻게 해야 합니까?

(아마도 수집했듯이) 문제는 계산된 속성이 이전에 구성된다는 것입니다.this사용 가능하지만, 이 문제를 해결하지 않으면 회피할 수 있습니다.this.namespace계산된 속성이 호출될 때까지 속성을 지정합니다(구성 요소 구축이 완료될 때까지 발생하지 않음).

이 개념은 계산 속성 온 더 플라이 생성 후를 기반으로 합니다.

기본 패턴은 다음과 같이 계산됩니다.get()그리고.set()

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

그러나 컴포넌트에 모두 입력하는 것이 아니라 vuex-map-fields를 기반으로 도우미 함수를 생성할 수 있습니다. mapFields()기능(원본은 여기를 참조).

그normalizeNamespace()vuex-map-fields와 함께 제공되는 함수는 우리가 원하는 작업을 지원하지 않으므로 이를 폐기하고 네임스페이스가 항상 전달된다고 가정합니다(또한 스토어 모듈이 표준을 사용함).getField그리고.updateField기능).

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

언급URL : https://stackoverflow.com/questions/54833150/vue-how-to-use-component-prop-inside-mapfields