Recompile build.js? about vue-mini-social-network

[yTakkar]

You can get User-data by this.$store.state.user.userDetails on created or updated methods. But data won't be the updated one. The updated user-data can be retrieved within computed property.
Have a look at this

[yTakkar]

There's a different command for building. yarn dev for development and yarn build for production.
And it will watch for any change and autorun the command.

[creaz35]

Thanks =)

It works,
Just a question,
How can i have access to the user data in the edit-profile vue in the mounted, or created method? I can see there is a dispatch event which call the user module and action but how can i have access to the data from here? Cheers

`<script>
import $ from 'jquery'
import Notify from 'handy-notification'
import userMixin from '../../mixins/user-mixin'
export default {
  mixins: [userMixin],
  methods: {
    editProfile: async function(){
      let
        username = $('.ep_username').val(),
        email = $('.ep_email').val(),
        bio = $('.ep_bio').val(),
        button = $('.ep_done'),
        {
          user: { username: susername, email: semail },
          $http,
        } = this,
        { body: uCount} = await $http.post('/api/what-exists', { what: 'username', value: username }),
        { body: eCount} = await $http.post('/api/what-exists', { what: 'email', value: email })
      button
        .addClass('a_disabled')
        .text('Processing..')
        .blur()
      if (!username) {
        Notify({ value: 'Username must not be empty!!' })
      } else if (!email) {
        Notify({ value: 'Email must not be empty!!' })
      } else if (uCount == 1 && username != susername) {
        Notify({ value: 'Username already exists!' })
      } else if (eCount == 1 && email != semail) {
        Notify({ value: 'Email already exists!' })
      } else {
        let { body } = await $http.post('/api/edit-profile', { username, email, bio })
        Notify({
          value: body.mssg,
          done: () => location.reload()
        })
      }
      button
        .removeClass('a_disabled')
        .text('Done Editing')
        .blur()
    },
    changeAvatar: async function(e){
      let
        file = e.target.files[0],
        form = new FormData()
      $('.overlay-2').show()
      $('.avatar_span')
        .text('Changing avatar..')
        .addClass('sec_btn_disabled')
      form.append('avatar', file)
      $.ajax({
        url: '/api/change-avatar',
        method: 'POST',
        processData: false,
        contentType: false,
        data: form,
        dataType: 'JSON',
        success: data => {
          Notify({
            value: data.mssg,
            done: () => location.reload()
          })
        }
      })
    }
  },
  created(){
    let {
        session: { username },
        $store: { dispatch }
      } = this
    dispatch('userDetails', username)
  },
  mounted(){
    $('.ep_username').focus()
  }
}
</script>`

[creaz35]

Thanks,
I tried to do a console.log(this.$store.state.user.userDetails) in the created method.
But i get:

{__ob__: Observer} __ob__ : Observer dep : Dep {id: 17, subs: Array(0)} value : {__ob__: Observer} vmCount : 0 __proto__ : Object __proto__ : Object

  created(){
    console.log(this.$store.state.user.userDetails);
    let {
        session: { email },
        $store: { dispatch }
      } = this
    dispatch('userDetails', email)
  },

[yTakkar]

I have used userMixin in the edit-profile component, so you can write this.user instead of this.$store.state.user.userDetails.

As I said, created and mounted are not the best place to get updated vuex state. Initially, userDetails is an empty object, so it returns {__ob__: Observer} __ob__ : Observer dep : Dep {id: 17, subs: Array(0)} value : {__ob__: Observer} vmCount : 0 __proto__ : Object __proto__ : Object when an object is empty.

If you run console.log(this.user) in the updated method you'll get the expected result.

[creaz35]

Thanks for your help,
It makes sense, i can have access to the data from the updated method.
However i'm just wondering how i can parse the data or have access to them differently from the created or data method? this.user works only on the updated method.

Cheers,

[yTakkar]

If you have a component and it gets some data from any API and updates the vuex store, you'll have access to the updated state in the updated method.
You'll still have access to the state in the created or mounted method.

Suppose,
// User store
userDetails {
username: 'yTakkar',
email: ''
}

// component
created/mounted() {
dispatch(someAPIcall) // changes email of user store to '[email protected]'
console.log(this.user.userDetails) // { username: 'yTakkar', email: '' }
},
updated() {
console.log(this.user.userDetails) // { username: 'yTakkar', email: '[email protected]' }
}