vue js의 로그인 구성 요소에서 사용자 상태를 업데이트하는 방법

vue js의 로그인 구성 요소에서 사용자 상태를 업데이트하는 방법

로그인 컴포넌트에서 사용자 vuex 상태를 업데이트하려고 합니다.저는 vuex를 사용해 본 경험이 거의 없기 때문에 그 과정에서 거의 혼란이 없습니다.내가 하려는 건 이거야

덧붙여서, (https://github.com/devjin0617/vue2-admin-lte) 를 사용하려고 합니다만, 프로젝트에 로그인 컴포넌트를 추가했습니다.

user.displaces

`const mutations = {
    set: (state, user) =>{

    state.main =   Object.assign({}, state.main, user)
}

actions.syslog

export const updateCurrentUser = ( {commit}, form ) => {

commit('setUser',form)

}

돌연변이형

 export const UPDATE_USER = 'UPDATE_USER'

드디어 로그인에 들어갑니다.vue component 액션을 호출하는 login() 메서드가 있습니다.

Login.vue

methods:{

    ...mapActions([
      'updateCurrentUser'
    ]),
logIn() {
    this.$store.commit() // I dont know which parameters to call here

    this.currentUser.mutations.set(this.form) // I´ve tried this, but doesn´t work
}

`

사용자를 업데이트하고 싶지만 현재 setter 메서드에 액세스할 수 있습니다.

이 작업을 수행하기 위해 올바른 방법 해결 순서를 따르고 있는지 모르겠습니다.

아직 절차를 밟지 못했습니다.

당신의 코드와 파일은 조금 지저분합니다.모듈과 함께 vuex를 사용하려고 하는 것을 알 수 있지만, 당신의 폴더와 파일 구조를 볼 수 없기 때문에 그 방법이 잘못된 것 같습니다.

이것을 실현하는 간단한 방법부터 시작합시다.

1. 작성store폴더 안에 있는 폴더 안에 있는 폴더src폴더

2. 돌연변이 유형 const js를 만듭니다.src/store/mutation-types.js

사용자 내부mutation-types.js이 코드를 입력하다

export const UPDATE_USER = 'UPDATE_USER'

3. 스토어 폴더 내에 작성index.js파일

4. 고객님의 내부src/store/index.js다음 코드를 입력합니다.

index.displaces를 표시합니다.

// import your mutation type name constants
import * as types from './mutation-types'

export default new Vuex.Store({
      state: {
        user: {} // default empty object
      },
      getters: {
        //...other getters...
      },
      mutations: {
        // mutating your user state
        [types.UPDATE_USER](state, user) {
          state.user = user
        }
      },
      actions: {
      },
})

5. 반드시 메인 내에 vuex 스토어를 Import합니다.js

사용자 내부main.js

import store from './store'

// other codes

// export Vue
export default new Vue({
  el: '#app',
  router,
  store, // add your store
  components: {App},
  template: '<App/>'
})

6. 컴포넌트 내부에서 커밋

Login.vue

methods:{
   logIn() {
     // let say you have gotten your user data
     // then you can commit it into vuex storage by using the mutation constant name you defined
     let userData = {user_id: 1}
     this.$store.commit('UPDATE_USER', userData)
   }
}

그렇습니다. 처음 시작할 때는 단순하게 하고 모듈처럼 화려한 것을 시도하지 마십시오.

최종 솔루션은 다음과 같습니다.

1 - vuex / vpair / user.devel

import firebase from 'firebase'

const state = {
  user:null
}

const getters = {

  user: state => {
    return state.user
  }
}

// mutations
const mutations = {

  'SET_USER' (state, user)  {

    state.user = user

  }
}

// actions
const actions = {

  setUser: ( {commit}, user ) => {

    if (user){

      let fireUser = null

      firebase.firestore().collection("users").doc(user.uid).get()
        .then( doc => {

          fireUser = doc.data()

          commit('SET_USER', fireUser)


        }).catch( err => {
        console.log(err)
      })
    }

    console.log(state.user)

  }

}

export default {
  state,mutations,actions,getters
}

2 - vuex / store.displays

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

import user from './modules/user'

Vue.use(Vuex)

// debugger
export const store = new Vuex.Store({
  modules:{
    user
  }
})

3- App.vue

// 사용자가 파이어베이스에 로그인 했을 때 이벤트가 발생하는 장소입니다.

created(){
    let _this = this
    window.firebase.auth().onAuthStateChanged( user => {
      // set user credentials
      if (user){

        if (_this.$store)
            _this.$store.dispatch('setUser', user)

      } else {

        if(_this.$store)
          _this.$store.dispatch('setUser', null)

      }
    })
  }

그것이 최선의 실시인지는 모르지만, 현재로서는 효과가 있다.

언급URL : https://stackoverflow.com/questions/53952493/how-to-update-a-user-state-from-a-login-component-in-vue-js