Vuex-Ax ios отображение полей / геттеров для basi c поиск записи для загрузки сообщений из неработающего типикода - Vue CLI

Question

Я создаю базовый c стартовый набор для получения записи в поле поиска, доступа к typicode api и хранения / отображения элементов с помощью Vuex, и получил ошибку. Существует только одно поле поиска и два состояния в Vuex: «posts» для записей (на данный момент) и «fieldValue», которые на данный момент снова будут «posts». Код, который я получил в данный момент, кажется близким но не совсем так, как показано ниже:

Приложение. vue

<v-container id="input" fluid>
    <v-row>
      <v-col cols="12">
        <v-text-field
          v-model="search"
          autofocus
          @keyup.enter="loadPosts(event)"
          type="string"
          label="Enter search term"
          append-icon="search"
        ></v-text-field>
      </v-col>
    </v-row>
  </v-container>
</template>
<script>
import { mapFields } from "vuex-map-fields";
import { mapState } from "vuex";
import { mapGetters } from "vuex";
export default {
  name: "App",
  // Get the fields and set them on each change
  /*mapFields(options) {
   const object = {};
    for (let x = 0; x < options.fields.length; x++) {
      const field = [options.fields[x]];
      object[field] = {
        get() {
          return this.$store.state[options.base][field];
        },
        set(value) {
          this.$store.commit(options.mutation, { [field]: value });
        }
      };
    }
    return object;
  },*/
  //  data() {},
  mounted() {
    this.$store.dispatch("loadPosts");
  },
  computed: {
    ...mapGetters(["fieldValue"]),
    ...mapState(["posts"]),
    ...mapFields({
      fields: ["search"],
      base: "posts",
      action: "loadPosts"
    })
  },
  components: {}
};

Индекс магазина. js (импорт наверху в порядке)

export default new Vuex.Store({
  state: {
    fieldValue: "",
    posts: []
  },
  mutations: {
    SET_POSTS(state, posts) {
      state.posts = posts;
    }
  },
  getters: {
    fieldValue: state => state.fieldValue
  },
  actions: {
    async loadPosts({ commit }) {
      let fieldValue = event.target.value;
      let url = "https://jsonplaceholder.typicode.com/" + fieldValue;
      await axios
        .get(url, { headers: { "x-dsi-restful": 1 } })
        .then(data => {
          console.log(data.data);
          let posts = data.data;
          commit("SET_POSTS", posts);
        })
        .catch(error => {
          console.log(error);
        });
    }
  },
  modules: {}
});

Так в индексе магазина. js состояния - это «записи» для сообщений, которые мы используем, и «fieldValue» (для случаев, когда нужно использовать переменную запись, но сейчас просто вводим «сообщения» в качестве поискового термина для присоединения к строка URL) Поэтому, когда все заработает, вы захотите использовать ЛЮБУЮ конечную точку в качестве поискового термина в App. vue и отобразить / обновить ее в состоянии «fieldValue», а также получить доступ к данным для нее в состоянии «posts» и показать его на странице. Похоже, что в данный момент я могу пытаться запустить функцию loadPosts дважды, один раз из записи поиска и снова в вычисляемых действиях. Закомментированный объект mapFields здесь еще не используется (если кто-то может заставить это работать на поле поиска, которое было бы бонусом!), Просто выполняя базовое c отображение / получение / обновление / мутирование записи в поле поиска " posts ", чтобы перевести их в состояние" posts "и отобразить их, позже сделав так, чтобы они работали для любого поискового запроса, если это возможно.

Итак, как теперь получить / отобразить / обновить и отобразить основную запись c search?

Советы приветствуются. Спасибо