無法訪問模塊之外的Vuex獲取器

即使我可以在Vue Dev Tools中看到getter，但無法從我的組件中的一個Vuex模塊訪問獲得者。無法訪問模塊之外的Vuex獲取器

我store.js文件：

import Vue from 'vue'; 
import Vuex from 'vuex'; 
import subsub from './modules/subsub'; 

Vue.use(Vuex); 
export default new Vuex.Store({ 
    state: { }, 
    actions: { }, 
    mutations: { }, 
    getters: { }, 
    modules: { 
    subsub, 
    }, 
});

我modules/subsub.js文件：

const state = { 
    categories: [{ 
    name: 'one', 
    path: 'two', 
    ... 
    }, { 
    name: 'twocat', 
    path: 'two', 
    ... 
    }], 
}; 

const actions = { }; 
const mutations = { }; 
const getters = { 
    filterCategories(state) { 
    return state.categories; 
    }, 
    filtertwo(state) { 
    const filteri = state.categories.filter((catee) => { 
     return catee.name === 'twocat'; 
    }); 
    return filteri; 
    }, 
}; 

export default { 
    namespaced: true, 
    state, 
    actions, 
    mutations, 
    getters, 
};

我的組件：

<template> 
    <div> {{ filterCategories }} </div> 
</template> 

<script>  
import { mapGetters } from 'vuex'; 

export default { 
    computed: { 
    ...mapGetters([ 
     'categories', 
     'filtertwo', 
     'filterCategories', 
    ]), 
    filtertwo() { 
     return this.$store.getters.filtertwo; 
    }, 
    filterCategories() { 
     return this.$store.getters.filterCategories; 
    }, 
    }, 

</script>

所以，我缺少的是什麼？是否有任何其他語法來從模塊訪問getters？

來源

2017-05-03 Marketingexpert

你在控制檯沒有收到任何錯誤？當你實例化Vue時，你是否通過商店？ – thanksd

我在控制檯中沒有收到任何錯誤。當我實例化Vue時，在商店中傳遞什麼意思？ ..順便說一句，我嘗試使用@click事件獲取和即使沒有工作 – Marketingexpert

無論你實例化主應用程序Vue組件（可能'main.js'）。您應該導入vuex存儲並將其包括在傳遞給'new Vue（{...}）' – thanksd

首先，你沒有吸氣劑categories，所以你需要添加一個。

其次，您的subsub模塊將其namespaced屬性設置爲true。這意味着，你需要提供的模塊名稱到mapGetter幫手：

...mapGetters('subsub', [ 
    'categories', 
    'filtertwo', 
    'filterCategories', 
]),

三，mapGetters函數創建filtertwo，併爲你filterCategories計算性能。但是，您正在手動重新定義它們，並將明確引用返回給$store.getters。但是，您沒有正確引用名稱空間，因此它們將返回undefined。無論是擺脫這些計算性能或正確地引用命名空間：

filtertwo() { 
    return this.$store.getters['subsub/filtertwo']; 
}, 
filterCategories() { 
    return this.$store.getters['subsub/filterCategories']; 
},

來源

2017-05-03 18:36:33 thanksd

以我vuex開發工具我看到這一點： subsub/filterCategories：數組[2] 'subsub/filterCategories：數組[2] 0：對象 1：對象 subsub/filtertwo：數組[1] 0：對象' – Marketingexpert

我剛剛添加了subub，因爲我的命名空間屬性設置爲true（thnx，因爲我不知道），但是我仍然沒有收到任何數據到我的組件中，而在使用Vue Dev工具進入Vuex Tab時，我看到了getters ，但一旦我去我的路由器視圖在組件選項卡我得到：filterCategories：undefined filtertwo：undefined – Marketingexpert

@Marketingexpert，我沒有注意到，你重新定義'filterCategories'和'filterTwo'計算屬性。這就是爲什麼你仍然在「未定義」。您應該使用'mapGetters'或手動創建計算屬性，但不能同時使用兩者。看到我更新的答案。 – thanksd

我找到了解決辦法，對日Thnx從提示@thanksd

通過使用上述其中的命名空間設置爲true的例子，我不得不添加以下爲部分

filterCategories() { 
     return this.$store.getters['subsub/filterCategories']; 
    },

否則，如果我不想加入subsub，我可以只設置命名空間爲false。這個問題花了我一段時間，讓我的頭。乾杯

來源

2017-05-03 19:28:56 Marketingexpert

無法訪問模塊之外的Vuex獲取器

回答

相關問題