/Javascript/Vue/Vuex get data in mounted

Vuex get data in mounted

const store = new Vuex.Store({
  state: {
    globalCompanies: {
      test: null
    }
  },
  mutations: {
    setMe: (state, payload) => {
      state.globalCompanies.test = payload
    }
  },
  actions: {
    pretendFetch: ({commit}) => {
      setTimeout(() => {
        commit('setMe', 'My text is here!')
      }, 300)
    }
  }
})

new Vue({
  el: '#app',
  store,
  computed: {
    cp: function() { // computed property will be updated when async call resolves
      return this.$store.state.globalCompanies.test;
    }
  },
  watch: { // watch changes here
    cp: function(newValue, oldValue) {
      // apply your logic here, e.g. invoke your listener function
      console.log('was: ', oldValue, ' now: ', newValue)
    }
  },
  mounted() {
    this.$store.dispatch('pretendFetch');
    // console.log(this.cp, this.$store.state.globalCompanies.test); // null
    // var cn = this.$store.state.globalCompanies.test; // null
    // console.log(cn) // null
  }
})

Source: stackoverflow.com

Similar codes

0 vote143 views1 answer
Import downloadCsv from "vue-json-csv";
Javascript Vue
0 vote192 views1 answer
Vue.js props undefined type
Javascript Vue
4 votes132 views1 answer
How to call action from another module vuex
Javascript Vue
0 vote136 views1 answer
Vue.runtime.esm.js?2b0e:619 [Vue warn]: Error in nextTick: "RangeError: Maximum call stack size exceeded"
Javascript Vue
2 votes152 views2 answers
Access data out of Axios .then vue.js
Javascript Vue
0 vote152 views1 answer
Aos initial configuration vue
Javascript Vue
0 vote160 views2 answers
Why i can't download node-sass while craeting new vue app
Javascript Vue
0 vote138 views1 answer
Global axios vue 2
Javascript Vue
0 vote148 views1 answer
Watching Arrays and Objects (Vue 3)
Javascript Vue
21 votes343 views1 answer
Sh: 1: vue-cli-service: Permission denied
Javascript Vue