Nuxt.jsミドルウェアでログオンしているユーザを確認してください

Question

私のNuxtアプリ用ミドルウェアをいくつか構築しました。

import api from '~/api/Api.js' 

export default function ({router, store}) { 
    return api.auth().onAuthStateChanged(function (user) { 
    store.state.user = user 
    if (user) { 

    } else { 

    } 
    }) 
} 

ここで、実際にユーザーオブジェクトにアクセスするにはどうすればよいですか。私は通常のコンポーネントからこれをやっているとき、正しく動作しています。単純な文字列を格納するために渡すこともできますが、他のアクションはありません。何らかの約束が必要ですか？ヘルプThx。

Answer 1

Vuexドキュメントから：

実際Vuexストアの状態を変更する唯一の方法は、 突然変異をコミットしています。 Vuex突然変異はイベントと非常によく似ています。 にはそれぞれ突然変異があり、文字列型とハンドラがあります。私たちは実際の状態の変更を行う どこハンドラ関数は、突然変異をコミットすることで、反応性の要素が更新されるように（Documentation link）

変異はまた、直接送信することにより、状態を操作のに対し、Vueの中DOMの更新をトリガ です文字列はリアクティブ更新を引き起こしません。 Vuexのドキュメントから：我々は状態を変異させたときに

Vuexストアの状態はVueのことで反応作られているので、状態を観察しVueのコンポーネントは、変異フォローヴューの反応性」と題し自動的

セクションを更新しますルール "には詳細なランダウンがあります。

ここでの注意点は、突然変異は同期データに対してのみ機能することです。 非同期データがある場合は、Vuexのアクションが助けになります - 突然変異を実行し、非同期イベントを処理できます。

他のサンプルコードがない場合、ここで他の問題があるかどうかを判断するのは難しいですが、この正確なシナリオで動作するサンプルストアファイルが含まれています。 nuxt固有のものではないが、原理は同じである：

あなたのモジュールで次に

// store.js 

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

Vue.use(Vuex) 

const state = { 
    user: {}, 
    files: [], 
    token: '' 
} 

const mutations = { 
    logOut (state) { 
    state.user = null 
    }, 
    setUser (state, user) { 
    state.user = user 
    }, 
    setToken (state, token) { 
    state.token = token 
    } 
} 

const actions = { 
    logOut: ({ commit }) => commit('logOut'), 
    setUser: ({ commit }, user) => commit('setUser', user), 
    setToken: ({ commit }, token) => commit('setToken', token) 
} 

const getters = { 
    user: state => state.user, 
    token: state => state.token, 
    files: state => state.files 
} 

export default new Vuex.Store({ 
    state, 
    getters, 
    actions, 
    mutations 
}) 

：

import store from '@/store' 
import { mapGetters } from 'vuex' 

api.auth().onAuthStateChanged(function (user) { 
    store.dispatch('setUser', user) // .dispatch triggers ACTION, handling async evt 
    if (user) { 

    } else { 

    } 
}) 


export default { 
    // mapGetters maps getters allowing this.user in script, or {{ user }} in template 
    computed: mapGetters([ 
    'user', 
    'files' 
    ]) 
}