Vuex:功能作用域模块中的未知Getter

Question

我在一个"特征范围结构"；这是第一次，我一直很难追踪为什么我会得到[vuex] unknown getter: $_kp/kp-(Vue/Vuex除了引用的错误之外，没有太多问题)。

更新：我打开了store.subscribeAction()，看看它是否会泄露更多信息。这是打印的日志(我没有看到任何有用的，但希望它能帮助你)。

操作类型：$_kp/getKpIndex

行动有效载荷：未定义

当前状态：｛ob：Observer｝$_kp:对象kp:"2〃//<-这就是我想要得到的——"；2"！

UPDATE-2:我现在也在使用Vues Inspector，它显示以下内容：

| State
| - $_kp: object
| - kp: "3"
| Mutation
| - payload: "3"
| - type: "$_kp/KP_DATA_UPDATED"

我们非常感谢在这方面的任何帮助，我希望这对以这种方式开店的人有用。

SomeElement.vue：

<script>
import {mapGetters} from 'vuex';
import store from '../_store';
export default {
name  : 'KpIndexElement',
parent: 'AVWX',
computed: {
...mapGetters({
kp: '$_kp/kp', //<-- HERE?
}),
},
created() {
const STORE_KEY = '$_kp';
if (!(STORE_KEY in this.$store._modules.root._children)) {//<= I think there is an issue with this too
this.$store.registerModule(STORE_KEY, store);
}
},
mounted() {
this.$store.dispatch('$_kp/getKpIndex');
},
}
</script>
<template>
<p><strong>Kp: </strong>{{ kp }}</p>
</template>

商店index.js

import actions      from './actions';
import getters      from './getters';
import mutations    from './mutations';
var state = {
kp: '',
};
export default {
namespaced: true,
state,
actions,
getters,
mutations,
};

actions.js:

import api from '../_api/server';
const getKpIndex = (context) => {
api.fetchKpData
.then((response) => {
console.log('fetch response: ' + response)
context.commit('KP_DATA_UPDATED', response);
})
.catch((error) => {
console.error(error);
})
}
export default {
getKpIndex,
}

突变.js

const KP_DATA_UPDATED = (state, kp) => {
state.kp = kp;
}
export default {
KP_DATA_UPDATED,
}

。。。最后是getters.js

const kp = state => state.kp;
export {
kp,
};

Answer 1

使用命名空间时mapGetters的语法如下：

...mapGetters('namespace', [
'getter1',
'getter2',
... // Other getters 
])

在您的情况下：

...mapGetters('$_kp', [
'kp'
])

第一个参数是名称空间，第二个参数是包含要使用的getter的有效负载。

此外，正如@Ijubadr在评论中所指出的，我不确定在您注册store模块后是否评估了mapGetters。要解决这个问题，您可能需要放弃使用mapGetters，并将STORE_KEY声明为数据，然后在其定义中使用STORE_KEY定义一个计算getter(我在下面的示例中将其重命名为storeKey，因为它不再是常数)：

computed: mapState('$_kp',{
kpIndex: 'kp'
}),
created() {
this.storeKey = '$_kp';
if (!(this.storeKey in this.$store._modules.root._children)) {
this.$store.registerModule(this.storeKey, store);
}
},
mounted() {
this.$store.dispatch('$_kp/getKpIndex');
}