vue.js - 如何在mounted（）上获取状态vuex并传递给数据？

Question

我想通过 props 组件输入传递状态 vuex，因为我想在组件输入上输入默认值。当第一次加载页面但状态 vuex 为空时，我必须从 vuex 获取数据。我在mounted() 上使用subcribe api vuex，但不能传递给数据。

表单.vue

<template>
input-modal(
  :data="namesAll"
  :validations="'required'"
  name="child"
  v-model="form.input1"
  :username="form.input1"
  class-input="form-control-lg"
  img-icon="https://img.icons8.com/ios/20/495057/user-filled.png"
  placeholder="Child"
  )

</template>

<script>
import inputModal from "~/components/form/inputModal.vue";
...

data: () => ({
    namesAll: []
  }),

mounted() {
    this.$store.dispatch("names/getNames");
    // test load vuex
    this.loadData();

    // get data mutation
    this.$store.subscribe((mutation, state) => {
      // console.log(state.names.all);
      if (mutation.type == "GET_ALL") {
        this.namesAll = state.names.all;
        console.log("na", state.names.all); // empty data
      }
    });
  },

methods: {
    loadData() {
      console.log("data vuex", this.$store.state.names.all); // data vuex empty
    }
  }

...

输入模式.vue

<template lang="pug">
  .input-modal

    .input-group(ref="inputGroup")
        .input-group-prepend(v-if="inputIcon || imgIcon")
          span.input-group-text
            i(v-if="inputIcon" :class="inputIcon")
            img(v-if="imgIcon" :src="imgIcon")

        input.form-control(
          type="text" :placeholder="placeholder"
          v-model="input" :class="[classInput, {'is-invalid': errors.has(name)}]"
          @focus="focus(true)" autocomplete="off"
          v-validate="validations" :name="name"
          )
        .invalid-feedback(v-if="errors.has(name)") {{ errors.first(name) }}

    <!-- modal -->
    transition(name="fade")
      .modal(v-show="focused" ref="modal")
        .modal-dialog.modal-lg(role="document")
          .modal-content
            .modal-header.bg-primary.text-white.justify-content-between
              h6.modal-title Pilih Nama
              button.btn.btn-link.p-0(@focus="focus(false)")
                .h5.m-0.text-white x

            .modal-body
              .row
                .col-md-6.col-12
                  ul.list
                    li.list-item(
                      v-for="name in data" 
                      :key="name.username"
                      @click="select(name.username)"
                      )
                      .name 
                        span.mr-3 {{ name.username }}
                        span.text-muted {{ name.name }}
</template>

<script>
export default {
  inject: ["$validator"],
  props: {
    data: { type: [Object, Array], required: false },
    inputIcon: { type: String, required: false, default: "" },
    imgIcon: { type: String, required: false, default: "" },
    placeholder: { type: String, required: false, default: "" },
    classInput: { type: String, required: false, default: "" },
    username: { type: String, required: true },
    validations: { type: [String, Object], default: "" },
    name: { type: String, required: true }
  },

  data: () => ({
    focused: false,
    input: "",
    selected: ""
  }),

  watch: {
    errors: function(error) {
      this.$emit("has-error");
    },

    username: {
      handler: function(val) {
        if (val == "" || val == undefined) {
          this.input = "";
          this.selected = "";
          return;
        }
        // console.log(val, this.data);
        // can't read vuex state
        this.select(val);
      },
      immediate: true
    }
  },

  created() {
    this.input = this.username || "";
  },

  mounted() {
    // console.log("im", this.data);
    if (this.username !== "") this.select(this.username);
  },

  updated() {
    this.$emit("input", this.selected);
  },

  methods: {
    focus(bol) {
      this.focused = bol;
    },
    select(username) {
      this.input = this.nameInfo(username);
      this.selected = username;
      this.focus(false);
    },
    nameInfo(username) {
      let names = this.data.filter(name => name.username == username);
      console.log("filter", names);
      if (names.length) return `${names[0].name} (${names[0].username})`;
    }
  }
};
</script>

我希望在第一次加载页面上从 state vuex 获取数据，并可以传递给 props 组件。

标签： vue.jsvuex

Answer 1

从 加载数据后getNames，您可以轻松地使用 mapState 镜像组件中的状态：

computed: {
  ...mapState('namesAll', state => state.namesAll)
},