기능에서 vuex 작업을 사용하는 방법

기능에서 vuex 작업을 사용하는 방법

저는 Vue에 처음 와서 뭔가 오해하고 있는 것 같아요.로컬 함수 내의 vuex 액션을 호출합니다.App.vue다음과 같이 합니다.

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

vue를 설정하는 main.js도 있습니다.

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

정의에는 몇 가지 문제가 있습니다.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.

별도의 기능으로 유지하려면 상점에 대한 접근 권한을 부여해야 합니다.애초에 왜 분리되기를 원하는지 알 수 없다면, 어떻게 그것을 달성하는 것이 최선인지 불분명합니다.

물론 인스턴스 이외에는 정의되어 있지 않습니다.내보낸 파일을 Import해야 합니다.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>

언급URL : https://stackoverflow.com/questions/57419701/how-to-use-vuex-action-in-function