未捕获的类型错误：从 js 模块导入存储时无法读取未定义的属性“getters”

Question

我正在尝试将 vuex 商店导入到我的 vuex 应用程序中的自定义 js 模块中。 我尝试了很多不同的方法，每次构建都说它是 100% 编译的，但是我从浏览器控制台收到以下错误，并且浏览器没有加载任何内容。

Uncaught TypeError: Cannot read property 'getters' of undefined

我尝试过多种方式导入它，但它们都在控制台中返回相同的错误响应。

import store from '../store'
import { store } from '../store'
import store from '../store/index.js'

我尝试过多种方式致电商店，包括：

let tokens = store.state.user.tokens
let tokens = store.getters['user/getTokens']

我的商店文件如下所示：

import Vue from 'vue'
import Vuex from 'vuex'

import user from './modules/user'

Vue.use(Vuex)

const store = new Vuex.Store({
  modules: {
    user
  }
})

export default store

这是 store/modules/user.js 文件的代码。

export default {
  namespaced: true,
  state: {
    user: {},
    active: false,
    tokens: {},
  },

  mutations: {
    updateUser(state, user) {
      state.user = user.details
      state.active = true
      state.tokens = user.tokens
    },
  },
  actions: {
    async updateUser({ commit }) {
      try {
        const res = await axios().get('/user/details') // I've taken out the axios deatils here
        commit('updateUser', res.data.user)
      } catch (error) {
        console.log(error)
      }
    },
  },
}

我不确定发生了什么。 我已经在另一个应用程序中成功地做到了这一点，但由于某种原因，这个没有按预期工作，正如我所提到的，它甚至没有将应用程序加载到浏览器中，它只是因为这个错误而失败。 这里的任何帮助将不胜感激。

Answer 1

没有看到更多的代码，很难诊断。 我刚刚创建了一个示例 Vuex 模块、存储和 Vue 组件，它正在工作。

用户存储模块.js

const userModule = {
  state: () => ({
    users: [
      {
        id: 1,
        name: 'Tim'
      },
      {
        id: 2,
        name: 'Debbie'
      }
    ]
  }),
}

export default userModule;

store.js

import Vue from 'vue'
import Vuex from 'vuex'

import userModule from './user-store-module.js'

Vue.use(Vuex)

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

VuexModule.js（带有 Vue CLI 的 Vue 2）

<template>
  <div class="vuex-module">
    <h3>Users</h3>
    <div class="row">
      <div class="col-md-6">
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>NAME</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.id }}</td>
              <td>{{ user.name }}</td>
            </tr>
          </tbody>
        </table>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    computed: {
      users() {
        return this.$store.state.userModule.users;
      }
    },
  }
</script>