title: Vuex ...mapActions() How to pass to a function by ...mapAction object
body: <p>How can I send the an object by ...mapAction()
  I have a button:</p>
  <pre><code>     &lt;form @submit.prevent=&quot;signIn&quot;&gt;
          &lt;div id='login'&gt;
              &lt;label for=&quot;username&quot;&gt;User&lt;/label&gt;
              &lt;input type=&quot;text&quot; id=&quot;username&quot; v-model=&quot;form.username&quot;&gt;
          &lt;/div&gt;&lt;/form&gt;
  </code></pre>
  <p>I have a script:</p>
  <pre><code>import { mapActions } from 'vuex'
  
  export default {
      username: 'signin',
      components: {
          //
      },
      data() {
          return {
              form: {
                  &quot;username&quot;: '',
                  &quot;password&quot;: '',
              },
          }
      },
      methods: {                  
        ...mapActions({signIn: 'auth/signIn'}),
        submit () {
          this.signIn(this.form)
        }
      }
  }
  </code></pre>
  <p>and in auth.js:</p>
  <pre><code>export default({
  namespaced: true,
  actions: {
      async signIn(_, credentials) {
          await axios.post('/rpc/authenticate', credentials)
          .then((response) =&gt; {
              console.log(response.data)
          })
      },
  </code></pre>
  <p>How should I call function, or how should I send the object with?</p>
  <p>I think here is a problem:</p>
  <pre><code>    methods: {                  
        ...mapActions({signIn: 'auth/signIn'}),
  
        submit () {
          this.signIn(this.form)
        }
      }
  </code></pre>
  <p>I got 404:</p>
  <p>xhr.js?1a5c:160          POST http://localhost:8001/api/rpc/auth 404 (Not Found)</p>
  <p>And If I send it from the same file.vue:</p>
  <pre><code>    methods: {
        async signIn () {
          let response = await axios.post('/rpc/authenticate', this.form)
          console.log(response)
        }
      }
  }
  </code></pre>
  <p>It works</p>