Как использовать хранилище Vuex во вспомогательном классе JS? Состояние не определено при вызове геттера - PullRequest
0 голосов
/ 10 июля 2020

То, что я пытаюсь сделать

Я пытаюсь вызвать геттер хранилища Vuex, используя вспомогательный класс JS. Он вызывается в методе mounted().

Короче говоря, порядок вызовов:

App.vue.mounted() -> 
context.helper.js.getWindowDimensions() ->
context.store.js.getters.getWindowWidth()

Цель

Изучите и поймите, как использовать вспомогательные классы с Vuex сохраняет.

Ошибка

Когда я вызываю геттер внутри хранилища, состояние хранилища не определено. См. Комментарии внутри context.store.js именно там, где состояние не определено во время отладки.

Код и комментарии

Vue компонент App.vue вызов помощника context.helper.js:

<template>
  <div id="app">
    <navbar />

    <siteBody />
  </div>
</template>

<script>
import navbar from "./components/navbar.vue";
import siteBody from "./components/site-body.vue";
import { mapGetters, mapActions } from "vuex";
import contextHelper from "./helpers/context.helper.js";

export default {
  name: "App",
  components: {
    navbar,
    siteBody
  },
  computed: {
    ...mapGetters("ContextStore", {
      getWindowWidth: "getWindowWidth",
      getWindowHeight: "getWindowHeight"
    })
  },
  methods: {
    ...mapActions("ContextStore", {
      setWindowWidth: "setWindowWidth",
      setWindowHeight: "setWindowHeight"
    }),
    
  },
  mounted() {
    contextHelper.getWindowDimensions();
    // contextHelper.test();
  },
};
</script>

<style>
#app {
}
</style>

Помощник context.helper.js, который вызывает хранилище context.store.js:

import ContextStore from "../stores/context.store";

export default {

  getWindowDimensions: function () {
    console.log(ContextStore.getters.getWindowWidth());
  },

  test: function() {
    console.log("");
  }

};

Помощник context.helper. js вызов context.store. js:

export default {

  debug: false,
  namespaced: true,

  state: {
    window: {
      width: 0,
      height: 0
    }
  },
  mutations: {
    SET_WINDOWWIDTH(state, width) {
      state.window.width = width;
    },
    SET_WINDOWHEIGHT(state, height) {
      state.window.height = height;
    }
  },
  actions: {
    setWindowWidth({ commit }, width) {
      commit("SET_WINDOWWIDTH", width);
    },
    setWindowHeight({ commit }, height) {
      commit("SET_WINDOWHEIGHT", height);
    }
  },
  getters: {
    getWindowWidth(state) {
      // state is undefined here when called by helper.
      return state.window.width;
    },
    getWindowHeight(state) {
      // state is undefined here when called by helper.
      return state.window.height;
    }
  }
};

Заранее спасибо за помощь!

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...