I'm not entirely happy with how the question is phrased. Feel free to suggest any improvements. Also, please understand that my frustration might be due to a mix of ignorance and annoyance which could result in inaccurate assessments of the issue. I apologize for that.
In this answer, it suggests using this.$store.xxx which doesn't work in my code because this is undefined. I have a strong suspicion that there may be something silly happening in the code (and that someone silly would be me), so let me lay out the structure of my component.
The idea behind it is that I have a landing page named index.js that creates two components - one for the visual aspect of the application and one for storing information. The visual component App will include a navigation bar (and later, a rendering area). The navbar will send commands to the store (and the viewing area) to display various *.vue files containing tables, lists, etc.
So, why am I encountering the message this is undefined? Is my entire structure flawed or am I just overlooking a small detail here and there?
index.js
import Vue from "vue"
import Store from "./vuex_app/store"
import App from "./vuex_modules/app.vue"
new Vue({ el: "#app-base", components: { App }, store: Store });
store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
const state = { ... };
const mutations = { ... };
export default new Vuex.Store({ state, mutations });
app.vue
<template><div id="app">App component<navigation></navigation></div></template>
<script>
import navigation from "./navigation.vue"
export default { components: { navigation } }
</script>
navigation.vue
<template><div id="nav-bar"><p v-on:click="updateData">Update</p></div></template>
<script>
import { updateData } from "../vuex_app/actions";
export default {
vuex: {
actions: { updateData },
getters: { ... }
},
methods: {
updateData: () => {
console.log("this is " + this);
this.$store.dispatch("updateData");
}
}
}
</script>
actions.js
export const updateData = ({dispatch}, data) => {
console.log("invoked updateData");
dispatch("UPDATE_DATA", data);
};