如何在函数中使用 vuex 动作

Question

我是 Vue 的新手，所以我很可能误解了一些东西。我想在 App.vue 的本地函数中调用 vuex 操作，如下所示：

<template>
  <div id="app">
    <button @click="runFunction(1)">Test</button>
  </div>
</template>

<script>
import { mapActions } from 'vuex'

export default{
  data() { return { } },
  methods: {
      ...mapActions(['doAction']),
      buttonClicked: (input) => { runFunction(input) }
  }
}

function runFunction(input){
  doAction({ ID: input });
}
</script>

该操作调用store.js 中的突变

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    IDs: []
  },
  mutations: {
    doAction: (state, id) => { state.IDs.push(id) }
  },
  actions: {
    doAction: ({ commit }, id) => { commit('doAction', id) }
  }
})

我还有一个 main.js 来设置 vue：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  el: '#app',
  store,
  render: h => h(App)
})

我得到的错误是：

ReferenceError: doAction is not defined
  at runFunction

如何在函数内调用映射的操作？版本为 Vue 2.6.10

Answer 1

将runFunction 定义为“本地函数”有几个问题：

function runFunction(input){
  doAction({ ID: input });
}

首先，这只是一个普通的 JavaScript 函数，并且适用通常的范围规则。 doAction 需要在某个函数可以看到的地方定义。此函数与App.vue 中定义的组件之间没有神奇的联系。组件中的代码（例如 buttonClicked 中的代码）可以访问该函数，但反之则不行。

下一个问题是它在您的模板中不可用。当您在将要查找this.runTemplate(1) 的模板中写入runTemplate(1) 时，尝试在当前实例上解决它。您的函数不在当前实例上。鉴于您的模板包含 @click="runFunction(1)"，我有点惊讶您没有看到控制台错误警告单击处理程序未定义。

mapActions 使用this.$store 中保存的引用访问存储。当您将store 添加到您的new Vue({store}) 时，将创建该引用。商店似乎可以通过魔法获得，但实际上只是this.$store，其中this 是当前组件。

目前还不清楚您为什么要尝试在组件之外编写此函数。最简单的解决方案是将其添加到methods。然后它将可用于模板，您可以以this.doAction 的身份访问doAction。

要将其保留为单独的功能，您需要为其提供某种对商店的访问权限。在不知道您为什么希望它首先分开的情况下，不清楚如何最好地实现这一点。

Answer 2

当然它不是在你的实例之外定义的......你必须在你的函数组件上从store.js 导入导出的store：

<script>
import { mapActions } from 'vuex'

import store from 'store.js'

export default{
  data() { return { } },
  methods: {
      ...mapActions(['doAction']),
      buttonClicked: (input) => { runFunction(input) }
  }
}

function runFunction(input){
  store.commit({ ID: input });
}
</script>