Assign the "this" keyword of App.vue to the Vuex state

Question

Assign the "this" keyword of App.vue to the Vuex state

I have discovered a workaround for accessing vue-router and other services that only works within a Vue component. By saving the "this" of the Vue app in the state of Vuex within the created option of App.vue.

Is this a good approach or could it potentially cause problems in the future?

Instead of using:

this.$router.push('route-name')

directly from a component, I am now storing the this keyword as a key called context in the state. Then, I use context instead of this in Actions like so:

state.context.router.push('route-name')

and it works.

My question is if this is a valid solution or not.

javascript vue.js vuex

Answer 1

Answer №1

In my opinion, relying on the direct usage of this is not a recommended solution. It would be better to utilize actions or getter returned values within a Vue file instead of directly using them in an action.

Allow me to provide an example along with an explanation:

Example:

Getter:

export function getRedirect(state){
 return state.routerName
}

Vue file:

<template>
Page 
<button @onClick="redirect" > Redirect </button>
</template>
<script>
import {mapGetters} from 'vuex'
export default: {
   computed:{
      ...mapGetters('VuexStoreName',['getRedirect'])
   },
   methods:{
        redirect(){
            this.$router.push(this.getRedirect)
        } 
   }
}
</script>

Instead of directly accessing the redirect within a JS file and passing it as a parameter or fetching it through the state, it's advisable to handle it appropriately within a Vue file.

The issue with assigning this in the state is that the saved instance will not update automatically when it changes, requiring manual updates everywhere. On the other hand, referencing this in a Vue file ensures its constant updation.

Answer 2

In my opinion, relying on the direct usage of this is not a recommended solution. It would be better to utilize actions or getter returned values within a Vue file instead of directly using them in an action.

Allow me to provide an example along with an explanation:

Example:

Getter:

export function getRedirect(state){
 return state.routerName
}

Vue file:

<template>
Page 
<button @onClick="redirect" > Redirect </button>
</template>
<script>
import {mapGetters} from 'vuex'
export default: {
   computed:{
      ...mapGetters('VuexStoreName',['getRedirect'])
   },
   methods:{
        redirect(){
            this.$router.push(this.getRedirect)
        } 
   }
}
</script>

Instead of directly accessing the redirect within a JS file and passing it as a parameter or fetching it through the state, it's advisable to handle it appropriately within a Vue file.

The issue with assigning this in the state is that the saved instance will not update automatically when it changes, requiring manual updates everywhere. On the other hand, referencing this in a Vue file ensures its constant updation.

Assign the "this" keyword of App.vue to the Vuex state

Answer №1

Similar questions

Quasar 2 + Apollo: Uh oh! There seems to be an issue with the Apollo client. The client with id default cannot be found. If you're setting up outside of

Is it possible to obtain the output of a JavaScript file directly? (kind of like AJAX)

Looking for a dynamic solution to retrieve over 100 data products in Angular JS? Let's explore methods to efficiently call a large volume of

The validation of pre-filled input fields in Angular Material dialogs is not working as expected

In Javascript, merge two arrays together in a specific format

Tips for creating animated clouds that move across the screen using Flash, jQuery, or JavaScript

Looking to switch up the thumbs-up button design?

Can content be dynamically loaded through ajax in Simile Timeline instead of being loaded upfront?

How can I display only a single quote instead of all the API data in a Vue 3 script setup?

Having trouble updating the icon on my website using FontAwsome

Adjust the button's width as the text changes to create a dynamic animation

The height of divs spontaneously changes after resizing without any instructions

Getting a ReferenceError while trying to use a MongoDB Collection variable in an external resolver file that had been imported through mergeResolvers

I am encountering errors when running NPM start

What could be causing the CastError: Cast to ObjectId failed in my code?

What could be the reason for the failure of .simulate("mouseover") in a Jest / Enzyme test?

Steps for generating a div, link, and image that links to another image using Javascript

Sending state information through props in a Vuex environment

Can you explain the functionality of that snippet of JavaScript code?

Enhance the axis functionality in c3.js