Как обновить состояние пользователя из компонента входа в vue js? - PullRequest
Новая
       12

Как обновить состояние пользователя из компонента входа в vue js?

0 голосов
/ 28 декабря 2018

Я пытаюсь обновить пользовательское состояние vuex из компонента Login, имеющегося здесь.У меня очень мало опыта работы с vuex, поэтому я немного потерян в процессе ... вот как я пытаюсь:

Кстати, я пытаюсь использовать (https://github.com/devjin0617/vue2-admin-lte)Однако я только что добавил компонент Login в проект

user.js 

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

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

actions.js 

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

commit('setUser',form)

}

mutation-types 

 export const UPDATE_USER = 'UPDATE_USER'

Наконец, в компоненте Login.vue у меня есть метод 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
}

`

Я хочу обновить пользователя, но в настоящее время я могу получить доступ к методу установки

Я не знаю, следую ли я правильному порядку разрешения метода, чтобы сделать эту работу...

Я все еще потерял в заказе для вызова процедур.

Ответы [ 2 ]

0 голосов
/ 30 декабря 2018

Окончательное решение выглядит следующим образом:

1-vuex / modules / user.js 

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.js 

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)

      }
    })
  }

Я не знаю, является ли это лучшимреализация, но пока работает

0 голосов
/ 29 декабря 2018

Судя по вашим заданным кодам, ваши коды и файлы немного запутаны, я вижу, что вы пытаетесь использовать 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.js 

// 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 в main.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)
   }
}

Вот и все, будьте проще при первом запуске, не пытайтесь делать что-нибудь необычное, как модули.

...