web-dev-qa-db-ja.com

vuex：不明なゲッター：ユーザー

私は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
javascriptvue.jsvuejs2vuex
6
Mateusz Urbański

ユーザー関連の各ファイルは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'
10
thanksd