在 Vuex 状态下设置 App.vue 的“this”关键字答案

【问题标题】：Set "this" keyword of App.vue in Vuex state在 Vuex 状态下设置 App.vue 的“this”关键字
【发布时间】：2022-01-17 12:09:14
【问题描述】：

我找到了关于如何访问 vue-router 和其他仅在 vue 组件内部工作的服务的说明。在 App.vue 的 created 选项中，我将 vue 应用程序的“this”保存在 vuex 的状态中。

这是一个好方法还是将来会出问题？

改为写：

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

在某些组件中，例如将状态下的this关键字保存为context键，现在从我使用context 而不是this 的操作开始像这样： state.context.router.push('route-name') 及其作品..

我的问题是它是否是好的解决方案。

【问题讨论】：

您能否提供Minimal, Reproducible Example 的必要代码。现在很难知道你在说什么。
澄清一下，您想在 vue 组件之外使用路由器吗？如果您包含一些示例代码，这个问题可能会更容易理解。
不，它不仅适用于路由器，还需要其他东西，例如需要“this”关键字作为“父”键来创建对话框的类星体对话框，以及更多的东西。
一般 Vue 只是为了方便而在this 上公开路由器和其他东西。您可以简单地从任何地方导入路由器实例并在组件中不使用this 的情况下使用它；它只会使代码稍微复杂一些并且不那么灵活（因为您要导入一个特定的路由器，而不是您分配给 Vue 实例的任何路由器）。所以……只要确保你有一个实例化路由器的地方，然后在 vuex 中 import 它。
这是可能的，但不是一个好习惯。巧合的是，this 是未记录在 afaik 中的 Vue 实例

标签： javascript vue.js vuex

【解决方案1】：

我认为这不是一个好的解决方案，如果你想使用 this，你应该尝试在 Vue 文件中使用动作或 getter 返回值，而不是直接在动作中使用它。

我在举个例子和解释

例子：

吸气剂：

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

Vue 文件：

<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>

因此，您将在 Vue 文件中正确使用它，而不是在 JS 文件中使用重定向、创建操作并在参数中传递它或通过状态获取它。

问题设置this在状态是当它改变时保存的实例不会改变，你必须随时随地更新。在 Vue 文件中调用 this，它会一直更新

【讨论】：