javascript - Mengenai vuex, apa yang diketahui ialah kaedah penghantaran dipanggil dalam komponen, dan nilai pulangan tidak ditentukan Saya tidak tahu apa yang salah.

Question

Menggunakan vuexmodules

• mutasi-jenis

export const GET_TABGRADE = 'GET_TABGRADE'

• kod bahagian api

    const tanjie = axios.create({
        baseURL: 'tanjie'
    })
    
    findGrade1: function () {
        return new Promise((resovle, reject) => {
            tanjie({
                url: '/content/findGrade1'
            }).then(response => {
                console.log('api is transfer')
                resovle(response.data)
            }).catch(error => {
                reject(error)
            })
        })
    },

• Modul:

import baseApi from '@/api/base'
import * as types from '../mutation-type'

const state = {
    tabGrade: {
        errno: 1,
        list: {}
    }
}

const getters = {
    getTabGrade: state => {
        state.tabGrade
    }
}

const actions = {
    // 调用api
    getTabGrade({ commit }) {
        console.log('is actions')
        return new Promise(function (resolve, reject) {
            baseApi.findGrade1()
                .then(res => {
                    commit(types.GET_TABGRADE, res)
                    resolve(res);   
                }).catch(err => {
                    console.log(err)
                })
        })

    }
}

const mutations = {
    [types.GET_TABGRADE](state, res) {
        
        state.tabGrade = {
            ...state.tabGrade,
            list: res.list
        }
        console.log(state.tabGrade)
        
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

• Di dalam komponen

  computed: {
    ...mapGetters([
      'getTabGrade'
    ]),
    
  created() {
    this.$store.dispatch('getTabGrade')
      .then(res => {
        console.log(res) // undefined
        return res
      })
      .catch(err => {
        console.log(err)
      })
  },

Sepatutnya tiada masalah untuk merujuk setiap modul, lagipun komponen boleh lulus this.$store 来访问 state

Tetapi saya tidak tahu kenapa dispatch 会返回 undefined

Data yang betul boleh diperolehi dalam komponen Bagaimana saya boleh menggunakannya, seperti memaparkan nama_gred1 melalui {{}}

Answer 1

Tambah pemulangan dan penyelesaian, jika tidak, panggilan yang dicetuskan oleh ini.$store.dispatch('getTabGrade') mungkin tidak mengembalikan janji dengan nilai yang betul.

const actions = {
    // 调用api
    getTabGrade({ commit }) {
        console.log('actions')
         return baseApi.findGrade1()    //添加return
            .then(res => {
                commit(types.GET_TABGRADE, res)
                resolve(res);   //添加resolve
            }).catch(err => {
                console.log(err)
            })
    }
}

Answer 2

Selesai, saya akhirnya melakukan beberapa pemprosesan dalam pengambil modul:

const getters = {
    getTabGrade: state => {
        console.log('getter',state.tabGrade)
        let tabGradeName = []
        for(var i =0; i<state.tabGrade.list.length; i++){
            tabGradeName.push(state.tabGrade.list[i].grade1_name)
        }
        return tabGradeName
    }
}

Sifat yang dikira ditulis dalam komponen akhir menggunakan sintaks templat,
html:

<span>{{getTabGrade[0]}}</span>

js:

  computed: {
    ...mapGetters([
      'getTabGrade'
    ])