Как вызвать действие (Nuxt Js)

Question

Я пытаюсь вызвать действие в моем vue из моего магазина.

Это мой файл алиментов. js в моем магазине:

import Vue from 'vue';
import Vuex from 'vuex';
import axios from 'axios';

Vue.use(Vuex, axios);

export const state = () => ({
  aliments: {},
})
export const mutations = () => ({
  SET_ALIMENTS(state, aliments) {
    state.aliments = aliments
  }
})
export const actions = () => ({
  async getListAliments(commit) {
    await Vue.axios.get(`http://localhost:3080/aliments`).then((response) => {
      console.log(response);
      commit('SET_ALIMENTS', response);
    }).catch(error => {
      throw new Error(`${error}`);
    })
    // const data = await this.$axios.get(`http://localhost:3080/aliments`)
    // commit('setUser', user)
    // state.user = data;
    // return state.user;
  }

})
export const getters = () => ({
  aliments (state) {
    return state.aliments
  }
})

Я хочу чтобы отобразить список алиментов в моем vue с помощью:

{{ this.$store.state.aliments }}

Я называю свое действие следующим образом:

<script>
import { mapGetters, mapActions } from 'vuex'

export default {

  computed: {
    ...mapGetters(['loggedInUser', 'aliments']),
    ...mapActions(['getListAliments']),
    getListAliments() {
      return this.$state.aliments
    }
  }
}
</script>

Я не понимаю, где моя ошибка: /

Примечание: я также пытался методом onclick для кнопки с диспетчеризацией ('aliment / getListAliments') ... но не работает ...

Answer 1

Привет и добро пожаловать в StackOverflow

, чтобы быстро ответить на ваш вопрос, вы бы назвали действие как:

this.$store.dispatch('<NAME_OF_ACTION>', payload)

или хотя mapActions как

...mapActions(['getListAliments']), // and you call `this.getListAliments(payload)`

или еще

...mapActions({
  the_name_you_prefer: 'getListAliments' // and you call `this.the_name_you_prefer(payload)`
}), 

для геттеров, это тот же процесс, поскольку у вас уже есть 2 определения ['loggedInUser', 'aliments'], вы просто вызываете геттер, как если бы это было вычисленное значение {{ aliments }}

или когда нам нужно сделать немного больше (например, фильтрацию)

getListAliments() {
    return this.$store.getters['aliments']
}

---

Но Я вижу, что ваш магазин, как мы называем, один к правилу их все, и поскольку вы используете Nuxt, вы действительно можете использовать хранилище модулей очень просто

по мере роста вашего приложения, вы начнете хранить все просто один файл хранилища (~/store/index.js файл), но вы можете легко иметь разные хранилища, и вместо того, что вы написали в index.js, будет проще, если у вас есть файл с именем, на вашем примере

~/store/food.js с

import axios from 'axios'

export const state = () => ({
    aliments: {},
})

export const getters = {
    aliments (state) {
        return state.aliments
    }
}

export const mutations = {
    SET_ALIMENTS(state, aliments) {
        state.aliments = aliments
    }
}

export const actions = {
    async getListAliments(commit) {
        await axios.get('http://localhost:3080/aliments')
            .then((response) => {
                console.log(response);
                commit('SET_ALIMENTS', response.data);
            }).catch(error => {
                throw new Error(`${error}`);
            })
  }
}

Кстати, помните, что если вы используете Nuxt serverMiddleware, эта строка

axios.get('http://localhost:3080/aliments')...

будет просто

axios.get('/aliments')...

, и для вызова этого магазина все, что вам нужно, это поставить префикс перед именем файла, например:

...mapActions(['food/getListAliments'])
// or
...mapActions({ getListAliments: 'food/getListAliments' })
// or
this.$store.commit('food/getListAliments', payload)

другое наименование, которое может помочь вам в этом кстати:

• на вашем действии getListAliments вы на самом деле получаете данные с сервера, я бы изменил имя на fetchAliments

• на вашем получателе aliments вы на самом деле возвращаете список, я бы назвал его getAllAliments

весело проведите время, Nuxt потрясающий, и у вас отличное сообщество на Discord , а также для мелких вещей: о)

---

РЕДАКТИРОВАТЬ

также запомнить , что actions установлены в methods

, так что вы можете сделать:

...
export default {
    methods: {
        ...mapActions(['getListAliments]),
    },
    created() {
        this.getListAliments()
    }
}

и в своем действии Store, пожалуйста, убедитесь, что вы пишете

async getListAliments({ commit }) { ... }

с фигурными скобками так как это деконструкция переданного имущества

async getListAliments(context) { 
   ...
   context.commit(...)
}

Answer 2

Проблема заключается в том, что вы отображаете свои действия в разделе «computed» компонента, вы должны отобразить его в разделе «method»!