Vuex: `$store` undefined

[symonxdd]

Describe the bug The global Vuex object: $store, appears to be undefined. See screenshot below.

To Reproduce Steps to reproduce the behavior:

1. Follow setup instructions from this repo's README a. vue create --preset kocal/vue-web-extension my-extension b. cd my-extension c. npm run serve
2. Define sample variable and method in the index.js in src/store/:

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        apples: []
    },
    mutations: {
        _updateApples(state, payload) {
            state.apples= payload;
        },
    },
    actions: {
        getUserSettings: async function ({ commit, state }, payload) {
            chrome.storage.local.get({
                apples: []
            }, items => {
                commit("_updateApples", items.apples);
            });
        },
    },
    modules: {
    }
})

App.vue in src/popup:

<template>
    <div>
        <h2 v-if="$store">Vuex works!</h2>
        <h2 v-else>I don't think so</h2>
    </div>
</template>

<script>
export default {
    name: "App",
    mounted() {
        this.setSampleUserSettings();
    },
    methods: {
        setSampleUserSettings: function () {
            this.$store.dispatch("setSampleUserSettings");
        },
    },
};
</script>

Expected behavior The global Vuex variable: $store to not be undefined.

Screenshots

Chrome Console errors:

Desktop (please complete the following information):

• vue-web-extension version: v2.0.0
  • OS: Windows 11
  • Node.js version: v14.15.0

[jjone36]

Can anyone please answer this issue? I'm also having the same kind of a problem he's having. It just seems not able to read store at all.. (state, commit, dispatch.. all gives the undefined message)

[jjone36]

It would've been nice if the developer of this CLI preset would document how the overall folder-structure works.

Can't agree more.. Thank you so much for the comment. It finally works 👍🏻👍🏻