【问题标题】:Why is my getter from store in App.vue class undefined为什么我在 App.vue 类的商店中的 getter 未定义
【发布时间】:2018-10-12 21:39:26
【问题描述】:

我正在使用 vue、vuex 和 vuex-typescript 构建一个电子应用程序。所以我使用 vuex-typescript 为我的商店提供了以下代码:

export const dispaVuex = {
  namespaced: true,

  state: {
    dispatch: new Dispatcher(appState),
  },

  getters: {
    getFTime(state: DispatchState): boolean {
      return state.dispatch.fistTime;
    },
  },
};

const {read} = getStoreAccessors<DispatchState, RootState>("Test");

export const readFtime = read(dispaVuex.getters.getFTime);

将商店添加到我的 vue 实例后,我尝试访问我的 App.vue 中的 firstTime 变量,如下所示:

@Component
export default class App extends Vue {
  // fTime: boolean;
  get fTime(): boolean {
    return readFtime(this.$store);
  }
}

查看调试器时,商店中的所有内容都已完美初始化,但我的 App 实例的 fTime 未定义。

为什么会这样?关于事物的制作顺序,我有什么不明白的吗?

PS。 firstTime 是 Dispatcher 类的成员

【问题讨论】:

  • 您是否在 Vue 根组件中初始化了状态? readFtime() 是 getter 函数,也许你应该在使用前在组件中传递 getter 函数?例如,请参阅 MapGetters 助手 vuex.vuejs.org/en/getters.html
  • return readFtime(this.$store);改成return this.$store.getters.getFTime;然后再试一次
  • @Sergey 我确实将 dispVuex 对象与 RootState 一起导入并像这样初始化存储:const store = new Vuex.Store&lt;RootState&gt;({ modules: { dispaVuex, }, }); 然后在我的 Vue 实例中这样做:new Vue({ components: { App }, store, template: "&lt;App/&gt;", }).$mount("#app");
  • @Sphinx 我试过这样做,但没有奏效,我知道你想说什么,但我认为这对我来说是不同的,因为我使用的是 vuex-typescript。这是我正在关注的示例:github.com/DevoidCoding/TodoMVC-Vue-TypeScript/tree/master/…

标签: vue.js vuejs2 vuex vue-class-components


【解决方案1】:

所以在仔细查看 vuex-typescript 自述文件中给出的示例后,我注意到在调用函数 getStoreAccessors 时传递了错误的命名空间。

像这样使用dispaVuex 而不是Test 可以解决问题:

const {read} = getStoreAccessors<DispatchState, RootState>("dispaVuex");

【讨论】:

    猜你喜欢
    • 2021-11-05
    • 2022-07-18
    • 2017-02-22
    • 1970-01-01
    • 2011-09-13
    • 2020-01-03
    • 2020-01-21
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多