Как обратиться к this.$store с компонента в nuxt?

Question

[devilsD]

Как в каком-нибудь компоненте ../compotents/some.vue обратиться к this.$store - получаю ошибку:
Unhandled promise rejection TypeError: "this.$store is undefined"
В моем случае я вызываю экшен this.$store.dispatch('login', form); в компоненте login-form.vue;
Может я неверный подход использую?

Comments

[fostsinger]

this.$store.dispatch('login/form' );

Answer 1

[Антон Антон]

https://nuxtjs.org/guide/vuex-store

Comments

[devilsD]

Я создаю хранилище Classic mode как написано в доках. В компоненте страницы обращение к this.$store работает. Не работает в компоненте с папки components, но вроде как должно работать:
We can now use this.$store inside our components

[Roman Alekseiev]

devilsD, можете примерный код показать чтобы взглянуть? на словах должно все работать

[devilsD]

Roman Alekseiev,

<template>
    <div> 
        <sweet-modal   modal-theme="dark" ref="login-modal">
            <form action="" ref="login-form">
                <div class="form-group">
                    <label>Username</label>
                    <input v-model="form.login" name="login" type="text" class="form-controll" />
                </div>
                <div class="form-group">
                    <label>Password</label>
                    <input v-model="form.password" name="password" type="text" class="form-controll" />
                </div>
                <div class="error" ref="login-error">
                    {{form.errorMessage}}
                </div>
                <button @click.prevent="login" class="btn btn-info">Login</button>
            </form>
        </sweet-modal> 
    </div>
    
</template>

<script>
import { SweetModal } from 'sweet-modal-vue'

export default {
    components: {
        SweetModal,
    },
    methods: {
         async login(){
                var form = new FormData();
                var elements = this.$refs['login-form'].getElementsByTagName('input')
                for (var i = 0; i < elements.length; i++) {
                        form.set(elements[i].name, elements[i].value);      
                }
                await this.$store.dispatch('login', form);
                this.data.form = this.$store.getters.data; 
        }
    },
    data(){
        return {
            form: {
                login: '',
                password: '',
                error: '',
                errorMessage: '',
                token: '',
            }
        }
    },
    mounted(){
        this.$refs['login-modal'].open();
    },
}
</script>