如何調用操作 (NuxtJs)

Question

我正在嘗試從我的商店調用我的 vue 中的一個操作。

這是我商店中的文件 aliments.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 中顯示一個 aliments 列表：

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

我這樣稱呼我的行動：

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

export default {

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

我不明白我的錯誤在哪里：/

注意：我還嘗試在帶有 dispatch('aliments/getListAliments') 的按鈕上使用 onclick 方法......但不起作用......

Answer 1

問題是你在組件的“計算”部分映射你的操作，你應該在“方法”部分映射它！

Answer 2

嗨，歡迎來到 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)`
}), 

對於 getter，這是相同的過程，因為您已經有 2 個定義['loggedInUser', 'aliments']您只需調用 getter，就像它是一個計算值<pre>{{ aliments }}</pre>

或者當我們需要做更多的事情時（比如過濾）

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

• 在您的 getter aliments您實際上是在返回列表，我將其命名為getAllAliments

玩得開心，Nuxt 很棒，你在Discord上也有一個很棒的社區，可以做一些小事:o)

---

編輯

還要記住， actions是在methods中設置的

所以你可以這樣做：

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

並在您的 Store 操作中，請確保您寫

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

帶花括號，因為這是對傳遞的屬性的解構

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