То, что я пытаюсь сделать
Я пытаюсь вызвать геттер хранилища 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;
}
}
};
Заранее спасибо за помощь!