[Vuejs]-Vuex – Passing a state's object into another state's object

by

0👍

There’re two issues with your code. Firstly, this doesn’t work the way you’re trying to make it to do. In your question this inside each notification doesn’t refer to the state or any other part of your code. Its value is the global window object or undefined, depends on whether you are in strict mode:

const object = {
   propName: this,
};

console.log(object.propName);

Secondly, you code is asynchronous, so theName would change from time to time, but you never actually redefine message strings in your notifications. And they won’t be ‘recalculated’ by itself:

let surname = 'Whyte';

const object = {
  fullName: 'Pepe ' + surname,
};

console.log(object.fullName);

setTimeout(() => {
  surname = 'White';
  console.log(object.fullName);
  console.log('the value of \'surname\' variable is ' + surname + ' though.');
}, 2000);

What you can do in your case is to define notification as a function:

notification(name) { return "Awesome " + name + "! Success."}

Then write a getter for notifications and pass a name to the function.

Or as an alternative you can refer to the object itself inside the function. Like this:

let surname = 'Whyte';

const object = {
  person: {
    firstName: 'Pepe ',
    fullName: () => {
      return object.person.firstName + ' ' + surname;
    },
  }
};

console.log(object.person.fullName());
setTimeout(() => {
  object.person.firstName = 'Keke';
  console.log(object.person.fullName());
}, 1000);

UPD: I’ve made another example for you. It’s hard to tell how exactly you are going to call this notifications, but here are two options you can access them the way you want (jsfiddle): 

const store = new Vuex.Store({
  state: {
    theName: 'Ricky Bobby',
    // accessing `theName` prop inside state (probably won't be possible in the real project or very inconvinient due to modularity)
    successNotificationInState: () => `Awesome ${store.state.theName}! Success.`,
  },
  // accessing the same prop with getter
  getters: {
    successNotification: (state) => `Awesome ${state.theName}! Success.`,
  },
  mutations: {
    loginSuccess(state, payload) {
      state.theName = payload.uName;
    },
  },
  actions: { // let's emulate a login
    login({
      commit
    }) {
      return new Promise(fullfil => {
        setTimeout(function() {
          console.log('logging in')
          const response = {
            uName: 'Keke',
            email: 'keke@gmail.com',
          }
          fullfil(response);
          commit('loginSuccess', response);
        }, 2000);
      });
    },
  },
});

const app = new Vue({
  el: "#app",
  store,
  data: {
    msgGetter: '',
    msgState: '',
  },
  computed: {},
  methods: {
    login() {
      this.$store.dispatch('login').then((response) => {
        console.log(response);
        console.log(this.$store);
        this.msgGetter = this.$store.getters.successNotification;
        this.msgState = this.$store.state.successNotificationInState();
      });
    },
  },
  mounted() {
    this.login();
  }
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/3.0.1/vuex.js"></script>
<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>Message from state: {{msgState}}</p>
  <p>Message from getter: {{msgGetter}}</p>
</div>

Leave a comment