Как в компоненте получить данные из хранилища?

Question

[Константин]

Как получить данные из productName?

comp.vue:

export default {
    data() {
        return {
            productName: this.$store.state.products
        }

store.js

export default {
    state: {
        products: [],
        productName: []
    },
    mutations: {
        LOAD_ALL_PRODUCTS(state, payload) {
            state.products = payload
        }
    },
    actions: {
        async loadAllProducts({commit}) {
            try {
                let res = await Vue.axios.get('/products/')
                commit('LOAD_ALL_PRODUCTS', res.data)
            } catch(err) {
                 console.log(err)
            }
        }
    },
    getters: {
        getProducts: state => state.products,

mounted() {
        console.log(this.productName);

Выдаёт следующее:

Answer 1

[karambafe]

Если вы хотите подписаться на данные из store, то используйте computed properties:

export default {
  computed: {
    productName() {
       return this.$store.state.products.map(product => product.name);
    },
  },
};

В store же вообще не надо заводить отдельный стейт productName, потому что это вычисляемое значение относительно стейта products - можно объявить как отдельный getter productName в Vuex, а можно получить через computed в компоненте как описано выше

Геттеры Vuex

Comments

[Константин]

Мне вычислить нужно, а присвоить типа как-то так
...mapState({
productName: state => state.products.name
})
Чтобы заполнить массив productName именами

[Константин]

В геттере сделал все получилось спасибо!

[karambafe]

Метод .map как раз и возвращает новый массив.

products - это массив объектов, надо раскрыть этот объект и посмотреть по какому ключу лежит имя.

[Константин]

Спасибо, понял.
Можно еще один вопрос, если не затруднит

Я делаю input c выпадающим списком с названием продукта разобрался,
не подскажешь как теперь мне быть?
Я выбираю название продукта, но у меня id нет, как мне перейти к этому товару
нужно еще как-то id этого товара определить?

[karambafe]

Мне кажется у Вас отсутствует базовое понимание массивов и объектов в JS, а так же нежелание читать документацию по vue, где все прекрасно описано с подробными примерами. Без обид :)

Если товар роутится по id, то конечно id надо передавать в выпадающий список. И плюс зачем было создавать отдельный getter для productName, когда нужны еще дополнительные значения. Все это лежит в массиве products.

Почитайте про v-for, а затем посмотрите на структуру своего массива products.

[Константин]

Читаю я много, понимание массивов есть, не профессионал - продвинутый новичок )
я делаю через v-autocomplete, здесь v-for нет.

<template>
  <v-toolbar
    dark
    color="teal"
  >
    <v-toolbar-title>State selection</v-toolbar-title>
    <v-autocomplete
      v-model="select"
      :loading="loading"
      :items="items"
      :search-input.sync="search"
      cache-items
      class="mx-3"
      flat
      hide-no-data
      hide-details
      label="What state are you from?"
      solo-inverted
    ></v-autocomplete>
    <v-btn icon>
      <v-icon>more_vert</v-icon>
    </v-btn>
  </v-toolbar>
</template>

https://vuetifyjs.com/ru/components/autocompletes

[karambafe]

Судя по документации тут items принимает массив строк или массив объектов.

Может быть массив объектов или массив строк. При использовании объектов будет искать поле текста и значения. Это можно изменить с помощью item-text и item-value свойств.

Если все правильно понял, то нужно подготовить правильный массив объектов с ключами text и value, который передается в items.

vuex:

getters: {
    productsAutocomplete: state => {
      return state.products.map(product => ({ text: product.name, value: product.id }));
    }
  }

[Константин]

Нет, так не получается стал объект, перестал выводится список товаров
и id неправильное

До этого был массив

Answer 2

[Дмитрий Кузнецов]

res.data.products и в v-for!?

Comments

[Константин]

Это мне еще один запрос к БД нужно сделать?

[Константин]

Нет, получается все тоже (

[Дмитрий Кузнецов]

Константин,

Это мне еще один запрос к БД нужно сделать?

Нет, вы получили массив записей. Теперь их нужно через v-for отобразить. Если нужна какая-то определённая запись, то обращайтесь через ключ.

[Константин]

productName: [] объявлен в data()
Мне нужно наполнить массив productName [
'name1',
'name2',
'name3',
...
]
из this.$store.state.products
в state он отображается по другому
v-for не пойдет

Answer 3

[Lumore]

Нужно использовать computed:

<template>
  <div>
    <div v-for="(product, index) in products" :key="index">{{product.name}}</div>
  </div>
</template>

export default {
  computed: {
    products () {
      return this.$store.state.products
    }
  }
}

Comments

[Константин]

Спасибо. Это понятно.

Мне нужно просто типа как-то так
...mapState({
productName: state => state.products.name
})
если это возможно
Чтобы заполнить массив productName именами