如何在 Vuex store 模块状态下访问 'this'
How to access 'this' in Vuex store module state
例如,假设我有一个这样的 "store" 目录:
...
store
├── auth
│ └── user.js
└── index.js
...
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import {user} from './auth/user';
Vue.use(Vuex);
/* eslint-disable no-new */
const store = new Vuex.Store({
modules: {
user
},
});
export default store;
现在,在 user
商店中,我的 state
道具中有一些常量和其他状态变量。我如何从自身内部访问 state
道具?例如 user
商店可能如下所示:
user.js
export const user = {
namespaced: true,
state: {
// hardcoded string assigned to user.state.constants.SOME_CONST
constants: {
SOME_CONST: 'testString'
},
// Another property where I would like to reference the constant above
someOtherStateProp: {
// Trying to access the constant in any of these ways throws
// 'Uncaught ReferenceError: .... undefined'
// Where '...' above is interchangeable with any root I try to access the constant from (this, state etc)
test1: this.state.constants.SOME_CONST,
test2: user.state.constants.SOME_CONST
test3: state.constants.SOME_CONST
test4: constants.SOME_CONST
test5: SOME_CONST
// .... etc. All the above throw ReferenceError's
}
}
};
如何从 user.state.someOtherStateProp.test1
引用 user.state.constants.SOME_CONST
?
感觉我在这里遗漏了一些非常基本的东西。
您可以分两步完成。
let user = {
namespaced: true,
state: {
SOME_CONST: 'testString'
}
};
Object.assign(user, {
state: {
someOtherStateProp: {
test1: user.state.SOME_CONST
}
}
});
export default user;
在此处阅读有关 Object.assign
的更多信息 - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
最简单的方法是在导出模块之前声明 CONSTANTS
对象并按如下方式访问它们
const CONSTANTS = {
SOME_CONST: 'testString'
}
export const user = {
namespaced: true,
state: {
// hardcoded string assigned to user.state.constants.SOME_CONST
constants: CONSTANTS,
// Another property where I would like to reference the constant above
someOtherStateProp: {
test1: CONSTANTS.SOME_CONST,
}
}
};
例如,假设我有一个这样的 "store" 目录:
...
store
├── auth
│ └── user.js
└── index.js
...
index.js
import Vue from 'vue';
import Vuex from 'vuex';
import {user} from './auth/user';
Vue.use(Vuex);
/* eslint-disable no-new */
const store = new Vuex.Store({
modules: {
user
},
});
export default store;
现在,在 user
商店中,我的 state
道具中有一些常量和其他状态变量。我如何从自身内部访问 state
道具?例如 user
商店可能如下所示:
user.js
export const user = {
namespaced: true,
state: {
// hardcoded string assigned to user.state.constants.SOME_CONST
constants: {
SOME_CONST: 'testString'
},
// Another property where I would like to reference the constant above
someOtherStateProp: {
// Trying to access the constant in any of these ways throws
// 'Uncaught ReferenceError: .... undefined'
// Where '...' above is interchangeable with any root I try to access the constant from (this, state etc)
test1: this.state.constants.SOME_CONST,
test2: user.state.constants.SOME_CONST
test3: state.constants.SOME_CONST
test4: constants.SOME_CONST
test5: SOME_CONST
// .... etc. All the above throw ReferenceError's
}
}
};
如何从 user.state.someOtherStateProp.test1
引用 user.state.constants.SOME_CONST
?
感觉我在这里遗漏了一些非常基本的东西。
您可以分两步完成。
let user = {
namespaced: true,
state: {
SOME_CONST: 'testString'
}
};
Object.assign(user, {
state: {
someOtherStateProp: {
test1: user.state.SOME_CONST
}
}
});
export default user;
在此处阅读有关 Object.assign
的更多信息 - https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/assign
最简单的方法是在导出模块之前声明 CONSTANTS
对象并按如下方式访问它们
const CONSTANTS = {
SOME_CONST: 'testString'
}
export const user = {
namespaced: true,
state: {
// hardcoded string assigned to user.state.constants.SOME_CONST
constants: CONSTANTS,
// Another property where I would like to reference the constant above
someOtherStateProp: {
test1: CONSTANTS.SOME_CONST,
}
}
};