Как в компоненте вывести загруженные данные?

Question

[VueProgrammer]

Существует джаваскрипт файл, в котором содержится следующая функция:

export const actions = {
  async loadFunction({ commit }) {
    try {
      const plans = await Parse.Cloud.run('getFunction', {}, {});
      commit('setFunction', plans);
    } catch (error) {
      commit('setFunction', null);
      return null;
    }
  },
};

Как вызвать эту функцию и получить результат в файле index.vue в этом разделе цикла:

<TItem
          v-for="
     (index, item) in ?????
          :key="index"
          :tplan="item"
          @delete="deleteItem(index)"
        />

Импорт функции в файл index.vue я сделал.

Comments

[DevMan]

VueProgrammer подсветка кода? не, не слышал!!!!1
подсказка: кнопка </> в редакторе.

Answer 1

[Дима Паутов]

// store
export const state = () => ({
	functions: []
});

export const actions = {
  async loadFunction({ commit }) {
    try {
      const plans = await Parse.Cloud.run('getFunction', {}, {});
      commit('setFunction', plans);
    } catch (error) {
      commit('setFunction', null);
      return null;
    }
  },
};

export const mutations = {
	setFunction: (state, payload) => {
		state.functions = payload;
	}
}

// Ваш копонент, где вы отображаете TItem
<template>
	<div>
		<TItem
          v-for="(item, index) in functions"
          :key="index"
          :tplan="item"
          @delete="deleteItem(index)"
        />
	</div>
</template>

<script>
import { mapState } from 'vuex'

export default {
	//....
	computed: {
		...mapState([
			'functions'
		])
	}
	//...
}
</script>

Answer 2

[Дмитрий]

Судя по всему это писали не Вы и вырвано это из контекста, а точнее vuex store.

Помимо actions должны быть state, mutations.

Эта функция в таком виде работать не будет.

Если она получает данные, то создается мутация setFunction, которая меняет state. Далее желательно создать геттер (условный getData), который будет возвращать вам данные.

А в компоненте создаете вычисляемое свойство с подходящим названием и с помощью геттера получаете данные.

И вот это свойство указываете в цикле.
Все просто

П.с. пока писал - Дмитрий все как раз изобразиь)

Answer 3

[Alex]

https://vuex.vuejs.org/ru/guide/state.html