【问题总结（25）】将接口数据存储到store里 debugger的三大方法 data请求体 result unknown action type 引入文件默认index 默认导出

需求 将接口数据存储到store里

参考: 将接口数据存储到store里.

报错

解决方法 debugger。

// An highlighted block
async loadData () {
      // 调用vuex store里的数据
      debugger
      try {
        this.loading = true
        console.log(this.$store)
        const accountList = await this.$store.dispatch('accountStore/GetAll')
        this.accountList = accountList
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
      console.log(this.accountList, '3')

刷新页面，页面一直处于刷新中
请教同事，这种情况说明程序没有走到这一步，
图中画圈处，每点击一下，就往下执行一下

下面定位bug 内联代码片。

// 前面说了，程序没有走到view页面那块，说明accountStore就不是对的，定位到accountStore.js文件

// accountStore.js
 mutations: { //经排查，是actions的property写到了mutation里面
    SET_ACCOUNT_LIST (state, list) {
      state.list = list
    },
    actions: {
      async GetAll ({ commit }, parameter) {
        const data = await getAll(parameter)
        commit('SET_ACCOUNT_LIST', data)
        console.log(data, '2')
        return data
      },
    }
  }

js快速定位bug的三大方法

js快速定位bug的3大技巧

// 

报错2

下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// An highlighted block
async loadData () {
      // 调用vuex store里的数据
      try {
        this.loading = true
        const accountList = await this.$store.dispatch('accountStore/GetAll')//获取store数据

unknown action type:XXX（未知的操作类型）

查博客
下面展示一些 内联代码片。

// 添加 namespace:true 

// store/modules/account.js
const accountStore = {
  namespaced: true,
}
export default accountStore

继续报错

下面展示一些 引入@/api 默认引入api文件夹下的index.js。

// 文件里没能成功引入account.js

// store/moudle/accountStore.js
import { account } from '@/api'

解决方法 import { account } from ‘@/api/account.js’

3.报错

下面展示一些 相关内联代码片。

// account.js里没有默认导出 getAll

// api/account.js
export function getAll (parameter) {
  return request({
    url: '/api/v1/account',
    method: 'get',
    params: parameter
  })
  
}

尝试export default function … 仍然报上述错误

另一种解决方法
下面展示一些 内联代码片。

// A code block
var foo = 'bar';

// 如果account.js里这些方法没有默认导出，就要这样引入，并且删掉原来 await account.getAll 中的account
import { getAll, getOne, create, update, destroy } from '@/api/account.js'
actions: {
    async GetAll ({ commit }, parameter) {
      const data = await getAll(parameter)
      commit('SET_ACCOUNT_LIST', data.result)
      console.log(data, '2')
      return data.result
    },

报错再度出现

debugger

由上图可知 accoutList这个变量值不可枚举

分析
下面展示accountList所在代码片段 内联代码片。

// 获取store里的数据 这部分没有问题，再去看store里的数据

// html
 try {
        this.loading = true
        console.log(this.$store)
        const accountList = await this.$store.dispatch('accountStore/GetAll')//这里的accountList
        this.accountList = accountList
      } catch (error) {
        this.$message.error(error.message)
      } finally {
        this.loading = false
      }
      console.log(this.accountList, '3')

下面展示一些 内联代码片。

// 首先store的入口文件 index.js里要引入accountStore.js

// store/index.js
import accountStore from './modules/accountStore'

export default new Vuex.Store({
  modules: {
    app,
    user,
    permission,
    accountStore
  },

// store/module/accountStore.js
 actions: {
    async GetAll ({ commit }, parameter) {
      const data = await getAll(parameter)
      commit('SET_ACCOUNT_LIST', data)
      console.log(data, '2')
      return data
    },

data 是什么，请求体

查看network里的各种参数时，要刷新一下，才会显示出来如下图

// data 就是上图里bussiness 对应的preview里的result

解决方法

// An highlighted block
 actions: {
    async GetAll ({ commit }, parameter) {
      const data = await getAll(parameter)
      commit('SET_ACCOUNT_LIST', data.result)
      console.log(data, '2')
      return data.result
    },