Как записать данные в глобальный стейт, что-бы сделать fetch запрос поиска во vue.js?

Question

[Lyulekin]

И вообще правильно я понимаю порядок действий?
1. Получаем значение из инпута
2. Записываем это значение в переменную
3. Передаем в глобальный стейт
4. используем эту переменную конкатенирая строки для фетч запроса

API:
- Строка поиска - https://dummyjson.com/docs/products#search




Файл Myinput.vue

<template>
  <form v-on:submit.prevent>
    <input type="text" placeholder="some user input" v-model="user_input">
    <button @click="sendData">Send data</button>
  </form>
  </template>
  
  <script>
  export default {
    name: 'my-input',
    data() {
    return {
      user_input: null
    }
  },
  methods: {
     sendData() {
       console.log(this.user_input)
      } 
  }
}
  
  </script>
  
  <style scoped>
  .input {
    width: 300px;
    border: 1px solid teal;
    padding: 20px 15px;
    margin-top: 15px;
    margin-left: 60px;
  }
  </style>

Файл store.js

import { createStore } from "vuex"

const store = createStore({
    state: {
        products: []
      }
    ,
    actions: {
      async fetchProducts(ctx) {
        const res = await fetch(
          'https://dummyjson.com/products'
          );
          const products = await res.json();

          ctx.commit('updateProducts', products)
        }
      },
      mutations: {
        updateProducts(state, products) {
          state.products = products.products
        }
      }
    })

  export default store;

Answer 1

[Николай]

Вроде все верно,
Вызываете fetchProducts внутри по клику sendData, либо прям по клику можно сразу вызвать fetchProducts и передать туда вашу строку