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

Issues with changing background colors using Jquery animate

Is there a Google Maps feature that displays clusters in a dropdown

Verify if the nested JSON object includes a specific key

Whenever a button is clicked in Vue.js 2, the $refs attribute is returning an empty object to me

Experiencing issues with passwords in nodemailer and node

Absence of property persists despite the use of null coalescing and optional chaining

Guide on printing in an Ionic application using print.js without the need to open the printer setup page

Exploring the vueJS canvas life cycle and transitioning between components

React Redux causing React Router to display empty pages

Is it feasible to establish a direct link between an Angular.js application and Dynamodb? Are there any other solutions available to eliminate the need for a backend

Using parseFloat in JavaScript for German number formatting

A guide on launching a modal within a Vue router

Generating dynamic dropdown lists with JavaScript for variable arrays

Switching images using jQuery

Utilizing a dynamic form action connected to an Express route

Using the power of AJAX, retrieve data from a PHP script and showcase the response within

Retrieve the image and insert it using an img tag

Dealing with AJAX error in pure JavaScript

I'm getting a JS error saying that the variable "var" is not defined. Does anyone know how I can

In jQuery, there seems to be an issue where the click event is not functioning properly on an element that has been