访问js文件中的vuex存储

Question

就像在main.js中一样,我正在尝试从帮助函数文件访问我的商店:

import store from '../store'

let auth = store.getters.config.urls.auth

但是它记录了一个错误:

未捕获的TypeError:无法读取未定义的属性"getters".

我试过了

this.$store.getters.config.urls.auth

结果相同.

商店:

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

Vue.use(Vuex);

const store = new Vuex.Store({
    state: {
        config: 'config',

    },
    getters: {
        config: state => state.config
    },
});

export default store

如何在组件外部使用我的商店？

Answer 1

以下对我有用:

import store from '../store'

store.getters.config
// => 'config'

Answer 2

如果您使用命名空间模块，您可能会遇到与我在尝试从商店检索项目时遇到的相同困难；

可能对您有用的是在调用 getter 时指定名称空间（示例如下）

import store from '../your-path-to-your-store-file/store.js'

console.log(store.getters.['module/module_getter']);

// for instance

console.log(store.getters.['auth/data']);

Answer 3

这在 2021 年对我有用

我尝试了很多不同的东西，似乎，至少在 Vue 3 中，这是有效的。这是一个示例商店：

export default {
  user: {
    bearerToken: 'initial',
  },
};

这是我的Getters文件：

export default {
  token: (state) => () => state.user.bearerToken,
};

在您的.js文件中，将页面添加到您的store\index.js文件中。

import store from '../store';

为了访问 getter 只需记住它是一个函数（当您使用mapGetters.）

console.log('Checking the getters:', store.getters.token());

状态更直接：

console.log('Checking the state:', store.state.user.bearerToken);