vuex: 未知 getter: 用户

Question

我正在试验 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
  }
})

当我加载我的代码时 returns 在控制台出现以下错误：

vuex: unknown getter: user

Answer 1

您的每个与用户相关的文件都使用 export default，这意味着当您导入这些文件时，您正在命名要导出的整个对象 state、getters 等。

所以，在index的范围内，state变量有一个名为state的属性，getters变量有一个属性命名为 getters，等等。这就是把事情搞砸了。

您应该为每个文件导出 const：

export const state = {
  user: null,
}

然后在导入时像这样获取命名的 const：

import { state } from './state'

或者，您可以从每个文件中删除 state、getters 等的属性：

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

然后像您已经在做的那样导入：

import state from './state'

vuex: 未知 getter: 用户

vuex: unknown getter: user

javascript

vue.js

vuejs2

vuex