Сохранение данных для хранения VUEX

Question

Доброе утро,

Я новичок в Vuex и пытаюсь начать с основ. Я следовал инструкциям по настройке «списка задач» и все это заработало. Но я также хочу больше общего хранилища c для аутентификации.

По сути, я хочу, чтобы информация о текущих зарегистрированных пользователях сохранялась в хранилище Vuex. В настоящее время у меня есть этот код ниже с приложением. vue

created () {
  this.fetchProjects()
  console.log('console-test ' + this.$store.getters.allProjects[0])

  // Firebase Auth
  firebase.auth().onAuthStateChanged((user) => {
    if (user) {
      this.user = user

      const ref = db.collection('Users')
        .where('user_id', '==', this.user.uid)
      ref.get().then(snapshot => {
        snapshot.forEach(doc => {
          this.userInfo = doc.data()
        })
      })
      .then(() => {
        console.log('user auth = ' + this.user.uid)
        console.log('user auth = ' + this.user.email)
        console.log('user info = ' + this.userInfo.username)
      })
    } else {
      this.user = null
    }
  })
}

Область, в которой я веду запись в консоль, я думаю, что было бы неплохо извлечь sh информацию, которая в настоящее время хранится в данных через «this.user» в магазине Vuex, чтобы легко использовать во всем приложении. Каков наилучший способ сделать это?

Answer 1

На самом деле вы должны хранить пользовательские данные в хранилище, а также сохранять данные в браузере localStorage, чтобы сохранить пользовательские данные при refre sh. Большие фреймворки, такие как NuxtJs, работают таким образом.

 .then(() => {
        console.log('user auth = ' + this.user.uid)

        this.$store.dispatch('storeJustLoggedInUser', this.user.uid);
 })

В вашем магазине vuex:

actions: {
    storeJustLoggedInUser({commit, state}, uid){
          commit('STORE_USER_UID', uid)
   }
}

Это просто псевдокод, надеюсь, вы поняли идею!

Answer 2

Если вы уже знаете, как использовать Vuex для хранения данных в приложении todo, нет ничего особенного в хранении пользовательских данных. Vuex просто работает с данными, точка. Таким образом, вы можете либо совершить мутацию, либо отправить действие и передать свои данные.