Search code examples
vue.jsvue-routervuex

Get store value in non-child component in Vue and Vuex

I have a Vuejs application that uses vue-router for the routeo and now I am wanting to implement Vuex for the management of the global state of the same. The problem is that I can not use the store, no matter how it is integrated or how I try to call it from a component, it just does not work.

I simply have a User object in my state and I have a mutation and a function that affect that state. When I initialize the Store, I load it with the information I need and in the vue-tools the information appears correctly, but the problem comes when I try to access that information from another component.

store/index.js

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

import actions from './actions';

Vue.use(Vuex);

const state = {
  user: {}
};

const mutations = {
  SET_ACTIVE_USER: (state, action) => {
    state.user = action.payload;
  }
};

export default new Vuex.Store({
  state,
  mutations,
  actions,
  strict: 'false'
});

store/actions.js

import axios from 'axios';

const actions = {
  getActiveUser({ commit }) {
    axios({
      method: 'GET',
      url: '/support/getUserData/',
      headers: {
        credentials: 'same-origin'
      }
    }).then(r => {
      commit('SET_ACTIVE_USER', {
        payload: r.data
      });
    }).catch(e => {
      console.error(e);
    });
  }
};

export default actions;

That is my implementation of the store, simply in the App.Vue root component I call that mutation to make the change in the state and it is done correctly.

App.vue

<script>
import { mapActions } from "vuex";
import axios from "axios";

export default {
  name: "eol-app",
  methods: {
    ...mapActions(["getActiveUser"])
  },
  created() {
    this.getActiveUser();
  }
};
</script>

So, in the vue-tools I observe this:

enter image description here

Now, I try to enter the store and get that data from another component, suppose one that is in the path /support/open in the following way, at the same time I try to assign this value of the store in a User object that I have in my data():

<script>
import { mapState, mapActions } from "vuex";

export default {
  name: "eol-ticket-open-list",
  data() {
    return {
      user: {}
    };
  },
  mounted() {
    this.user = this.getUser;
    this.getConsortiums();
  },
  computed: {
    getUser() {
      return this.$store.state.user;
    }
  }
};
</script>

And in the vue-tools I observe this:

enter image description here

But as you can see, the User object is empty, and I can not use it. Worse still, if I try to make an HTTP request with some value of the user that gives me an error, obviously because the object is empty. Also try to make a computed property where I only return the id of the user, but it does not work either, since in case of doing so, the value that returns is the default value of the store, and not the value that is in the store effectively.

Finally, this is my main.js file if needed:

import Vue from 'vue';
import router from './router';
import store from './store';
import Element from 'element-ui';
import locale from 'element-ui/lib/locale/lang/es';
import 'element-ui/lib/theme-chalk/index.css';

// Components
import App from './App';

// ElementUI Root Configuration.
Vue.use(Element, {
  size: 'small',
  locale
});

Vue.config.productionTip = false;

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

Any help is welcome, because I really do not understand what I'm doing wrong, and I do not know how to solve this problem. Thank you!

Solution

  • The solution is the one that Ber describes in the first comment of the original question, as it was not an answer as he answered my question so it is settled.

    The computed properties simply must be used, and not assign their value to a property or an object within the data in my copmonent.