javascript - vuex getter中访问Nuxt插件功能

Question

我正在开始使用 nuxtjs 和 vuex。我刚刚遇到从 getter 访问组合注入(inject)插件函数的问题。例如:

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 文档仅展示了从 mutations 和 actions 访问注入(inject)的插件函数的示例，但没有明确提及 getter 无法访问插件函数。这在 nuxt 中甚至是可能的，还是有充分的理由不在 getter 中调用插件方法？任何帮助表示赞赏。

Answer 1

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

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

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

所以我想说 Nuxt 在这里做的事情是有道理的，注入(inject) Action 而不是 setter/getter 。