Как получить состояние vuex из файла javascript (вместо компонента vue)

Question

Я работаю с vuex (2.1.1) и получаю все, что работает в vue отдельных компонентах файла. Однако, чтобы избежать слишком большого крутизны в одном компоненте vue, я переместил некоторые функции в модуль utils.js, который я импортирую в файл vue. В этом utils.js я хотел бы прочитать состояние vuex. Как я могу это сделать? Как кажется, приближение к состоянию с геттерами и т. Д. Предполагает, что вы работаете из компонента vue или нет?

Я пытался использовать import state from '../store/modules/myvuexmodule', а затем ссылаюсь на state.mystateproperty, но он всегда дает «undefined», тогда как в vue-devtools я вижу, что свойство состояния имеет правильные значения.

Моя оценка на этом этапе заключается в том, что это просто не «путь», поскольку значение state.property в файле js не будет реактивным и, следовательно, не будет обновляться или что-то в этом роде, но, возможно, кто-то может подтвердить/доказать я ошибаюсь.

Answer 1

Доступ к хранилищу возможен как объект во внешнем js-файле, я также добавил тест для демонстрации изменений состояния.

здесь внешний JS файл:

import { store } from '../store/store' 

export function getAuth() { 
    return store.state.authorization.AUTH_STATE 
} 

состояние модуля:

import * as NameSpace from '../NameSpace' 
/* 
    Import everything in NameSpace.js as an object. 
    call that object NameSpace. 
    NameSpace exports const strings. 
*/ 

import { ParseService } from '../../Services/parse' 

const state = { 
    [NameSpace.AUTH_STATE]: { 
    auth: {}, 
    error: null 
    } 
} 

const getters = { 
    [NameSpace.AUTH_GETTER]: state => { 
    return state[NameSpace.AUTH_STATE] 
    } 
} 

const mutations = { 
    [NameSpace.AUTH_MUTATION]: (state, payload) => { 
    state[NameSpace.AUTH_STATE] = payload 
    } 
} 

const actions = { 
    [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => { 
    ParseService.login(payload.username, payload.password) 
     .then((user) => { 
     commit(NameSpace.AUTH_MUTATION, {auth: user, error: null}) 
     }) 
     .catch((error) => { 
     commit(NameSpace.AUTH_MUTATION, {auth: [], error: error}) 
     }) 
    } 

export default { 
    state, 
    getters, 
    mutations, 
    actions 
} 

Магазин:

import Vue from 'vue' 
import Vuex from 'vuex' 
import authorization from './modules/authorization' 

Vue.use(Vuex) 

export const store = new Vuex.Store({ 
    modules: {   
    authorization  
    }     
})     

До сих пор все, что я сделал, это создать файл JS который экспортирует функцию, возвращающую свойство AUTH_STATE переменной состояния authorization.

Компонент для тестирования:

<template lang="html"> 
    <label class="login-label" for="username">Username 
     <input class="login-input-field" type="text" name="username" v-model="username"> 
    </label> 
    <label class="login-label" for="password" style="margin-top">Password 
     <input class="login-input-field" type="password" name="username" v-model="password"> 
    </label> 
    <button class="login-submit-btn primary-green-bg" type="button" @click="login(username, password)">Login</button> 
</template> 

<script> 
import { mapActions, mapGetters } from 'vuex' 
import * as NameSpace from '../../store/NameSpace' 
import { getAuth } from '../../Services/test' 

export default { 
    data() { 
    return { 
     username: '', 
     password: '' 
    } 
    }, 
    computed: { 
    ...mapGetters({ 
     authStateObject: NameSpace.AUTH_GETTER 
    }), 
    authState() { 
     return this.authStateObject.auth 
    }, 
    authError() { 
     return this.authStateObject.error 
    } 
    }, 
    watch: { 
    authError() { 
     console.log('watch: ', getAuth()) // ------------------------- [3] 
     } 
    }, 
    authState() { 
     if (this.authState.sessionToken) { 
     console.log('watch: ', getAuth()) // ------------------------- [2] 
     } 
    }, 
    methods: { 
    ...mapActions({ 
     authorize: NameSpace.ASYNC_AUTH_ACTION 
    }), 
    login (username, password) { 
     this.authorize({username, password}) 
     console.log(getAuth())    // ---------------------------[1] 
    } 
    } 
} 
</script> 

На состояния кнопки нажмите по умолчанию записывается на консоль. Действие в моем случае приводит к вызову api, в результате чего изменяется состояние, если комбинация имени пользователя и пароля имела запись.

Успешный случай приводит к отображению консоли в authState watch, импортированная функция может печатать изменения, внесенные в состояние.

Кроме того, на неисправностью случае, часы на authError будут показаны изменения, внесенные в состояние