首页 文章

vuex:未知的getter:user

提问于
浏览
4

我正在尝试使用vuex,我正在寻找组织我的vuex文件的最佳方法,我完成了这样的事情:

/src/store/user/state.js:

export default {
  state: {
    user: null
  }
}

/src/store/user/getters.js:

export default {
  getters: {
    user (state) {
      return state.user
    }
  }
}

/src/store/user/mutations.js:

export default {
  mutations: {
    'SET_USER' (state, user) {
      state.user = user
    }
  }
}

/src/store/user/actions.js

export default {
  actions: {
    loginUser ({ commit }, params) {
       commit('SET_USER', {id: 1})
    }
  }
}

/src/store/user/index.js

import state from './state'
import getters from './getters'
import actions from './actions'
import mutations from './mutations'

export default {
  state,
  getters,
  actions,
  mutations
}

/src/store/index.js:

import Vue from 'vue'
import Vuex from 'vuex'
import user from './user'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    user
  }
})

当我加载我的代码时,它会在控制台中返回以下错误:

vuex: unknown getter: user

1 回答

  • 7

    每个与用户相关的文件都使用 export default ,这意味着在导入这些文件时,您将命名要导出的整个对象 stategetters 等 .

    因此,在 index 的范围内, state 变量具有名为 state 的属性, getters 变量具有名为 getters 的属性,等等 . 这就是抛弃它 .

    您应该为每个文件导出 const

    export const state = {
      user: null,
    }
    

    然后在导入时 grab 名为_935172的如下:

    import { state } from './state'
    

    或者,您可以从每个文件中删除 stategetters 等的属性:

    // state.js
    export default {
      user: null,
    }
    

    然后导入就像你已经做的那样:

    import state from './state'
    

相关问题