在 vuex getter 中访问 Nuxt 插件功能答案

【问题标题】：Accessing Nuxt plugin function in vuex getter在 vuex getter 中访问 Nuxt 插件功能
【发布时间】：2020-08-18 23:12:09
【问题描述】：

我开始使用 nuxtjs 和 vuex。我刚刚遇到了从 getter 访问组合注入插件函数的问题。例如：

nuxt.config.js

...
plugins: [
  '~/plugins/myplugin.js'  
  ],
...

~/plugins/myplugin.js

function doSomething(string) {
        console.log("done something: " + string)
    }

export default ({ app }, inject) => {
    inject('doSomething', (string) => doSomething(string))
  }

~/store/index.js

export const actions = {
    someAction({commit}) {
        this.$doSomething("Called from Action") // works
    }
}

export const getters = {
    someGetter: state => {
        this.$doSomething("Called from Getter") // throws error
    }
}

代码适用于操作someAction，但在getter someGetter 中的调用将导致错误提示this 未定义。

nuxt 文档仅显示了从突变和操作访问注入插件函数的示例，但没有明确提到 getter 不能访问插件函数。这在 nuxt 中是否可能，或者是否有充分的理由不在 getter 中调用插件方法？任何帮助表示赞赏。

【问题讨论】：

标签： javascript plugins vuex nuxt.js

【解决方案1】：

您不应该尝试在吸气剂中使用do_something。 Getter 仅用于从商店的状态中获取状态。关键是您不必单独存储和保持最新的派生状态。例如，您有一个任务列表，并且您有一个已完成任务的 getter，而不是一个单独的已完成任务列表：completedTasks: state => state.tasks.filter(task => task.completed)。

Mutations 应该只用于改变你商店的状态。

最后，在操作中，您可以与您需要的任何东西进行交互，例如某处的网络服务器 API 或 this.$do_something，然后触发突变以根据结果更新状态。

所以我想说 Nuxt 在这里所做的事情是有道理的，即注入动作而不是 getter。

【讨论】：

感谢您的回答，我猜这被认为是一种不好的做法，但找不到任何明确的说明。你的回答清楚地表明了这一点。我的用例如下： getter 将用于从状态中检索一些数据并将其格式化以供进一步使用（getter 可能被命名为getDataFormatted）。由于进行格式化的代码可能会在其他地方/商店中使用，我认为最好通过插件提供它，以保持一切干燥。但我明白你的意思，并猜测最好在最后使用数据的地方进行格式化。

【解决方案2】：

我遇到了同样的问题，我能够通过这样做来解决它

export const getters = {
  someGetter: state => {
    $nuxt.$doSomething("Called from Getter") // Grab $nuxt from the global scope
  }
}

不确定这是否适用于 SSR 模式

【讨论】：

它可能有效，当然我不知道您的用例，但我认为您不应该这样做:-) 就像我在回答中强调的那样，我认为吸气剂应该只是用于从商店的状态派生状态。
你的观点当然很好。在我的情况下，“派生”状态取决于一个参数，我需要对该参数做一些事情。例如 getSeries: (state) => (parameter) => { return state[getKeyFromParameter(parameter)] } 不确定让 getter 带参数是否是个好主意
是的，然后您使用返回函数的 getter，例如您的 getSeries。但是，如果您需要 Nuxt 中的某些内容，我会将其传递给调用站点的 getter 函数，而不是从 getter 中的 $nuxt 中获取。这可以让你的 getter 很好地与 Nuxt 和除状态之外的任何其他东西解耦。