（vueコンポーネントの代わりに）javascriptファイルからvuex状態を取得する方法

Question

私はvuex（2.1.1）で作業しており、vueの単一ファイルコンポーネント内で動作するようにしています。しかし、私のvueの単一ファイルコンポーネントであまりにも多くのことを避けるために、いくつかの機能をutils.jsモジュールに移動しました。これをvueファイルにインポートします。このutils.jsでは、vuexの状態を読んでみたいと思います。どうやってやるの？ gettersなどで状態に近づいているように見えるのは、あなたがvueコンポーネント内から作業していると思われるかどうかです。

私はimport state from '../store/modules/myvuexmodule'を試してからstate.mystatepropertyを参照しましたが、vue-devtoolsではstateプロパティに適切な値が設定されていますが、常に 'undefined'と表示されます。

この時点で私の見積もりは、jsファイル内のstate.propertyの値が反応しないため、更新されないか、何かが確認/確認される可能性があるためです私は間違っている。

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プロパティを返す関数をエクスポートします。テストのための

コンポーネント：ボタンをクリックし、デフォルトの状態で

<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時計に表示され、インポートされた関数は状態の変更を印刷できます。

同様に、失敗した場合には、authError上の時計は、私はあなたのファイルを参照してくださいカントとして十分に理解しないが、vue.use（vuex）は、すべてのVUEにvuexを加算