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

当然，它不是在实例外部定义的...。您必须从功能组件上的store导入导出的store.js：

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

Answer 2

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

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

首先，这只是一个普通的JavaScript函数，并且适用通常的作用域规则。 doAction需要在此函数可以看到的地方定义。此功能与App.vue中定义的组件之间没有魔术链接。组件中的代码可以访问该功能，例如buttonClicked中的代码，但反之则相反。

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

mapActions通过使用this.$store中保留的引用来访问商店。当您将store添加到new Vue({store})时，将创建该引用。这家商店似乎看起来很神奇，但实际上只是this.$store，其中this是当前组成部分。

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

要将其保留为单独的功能，您需要为它提供对商店的某种访问权限。首先不知道为什么要分开它，目前尚不清楚如何最好地实现它。

如何在功能中使用vuex操作

2 个答案: