Блог

Во время выполнения полезная нагрузка объекта, которую я передаю в качестве вторичного параметра моему методу мутации Vuex, всегда undefined . Оба моих файла Vuex и компонентов написаны на TypeScript.

Мой index.ts файл для моего хранилища Vuex выглядит следующим образом (обратите внимание, что я использую модульный подход к хранилищу):

 import Profile from '@/models/Profile'
import { createStore } from 'vuex'

const userModule = {
  state: () => ({
    profile: Profile
  }),
  mutations: {
    setProfile (state:any, profile: Profile) {
      // `state` is the local module state
      state.profile = profile //**RUNTIME ERROR: profile = undefined
    } 
  },
  getters: {
    getProfile (state:any) {
      return state.profile
    }
  }
}

export default createStore({
  state: {
  },
  mutations: {
  },
  actions: {
  },
  modules: {
    user: userModule
  }
})
 

Я фиксирую хранилище из моего компонента Vue methods следующим образом:

  <script lang="ts">
 export default Vue.extend({
    methods: {
      fetchProfile() {
        axios
            .get("/getUser", requestHeader)
            .then((profileResponse: Profile) => {
              //store profile in Vue Store
              store.commit('setProfile', profileResponse)
            })
      }
    }
 })
 </script>
 

Что я делаю не так?

Обратный axios.get().then() вызов имеет параметр типа AxiosResponse , который переносит фактический ответ в его data свойство. Код должен выглядеть следующим образом:

 import axios, { AxiosResponse } from 'axios'

axios.get(/*...*/)
  .then((response: AxiosResponse) => {
    const profileResponse = response.data
    store.commit('setProfile', profileResponse)
  })