0

In my component , I am trying to execute a vuex action from a module, but I am getting an error, even if this action is defined :

console.log

DELETE USER:  14
ListUsers.vue:131
[vuex] unknown action type: deleteUser

UPDATE inserted the template

here is the full template in my ListUsers.vue

In each table row I have a trash icon, which fire a modal panel ( ref="delUserModal" ) to confirm the delete action

  <b-btn class="btn" variant="danger" block 
    @click="onAction('delete-user', props.row)">Yes, Delete It
  </b-btn>

ListUsers.vue

<template>
  <div id="users">
    <v-server-table name='users' url="users" ref='userTable' :columns="columns" :options="options">
      <template slot="afterBody">
        <div class="row">
          <router-link :to="{ name: 'new_user' }" class="left btn btn-primary">New User</router-link>
        </div>
      </template>
      <template slot="child_row" slot-scope="props">
          <div id="userDetail" class="row">
              <div id="userPic" class="col-md-3">
                <img src="./../../assets/user_default.png">
              </div>
              <div class="col-md-6">
            <ul>
                    <li><b>First Name:</b> {{props.row.firstName}}</li>
                    <li><b>Last Name:</b> {{props.row.lastName}}</li>
                    <li><b>Email:</b> {{props.row.email}}</li>
                    <li><b>Birth Day:</b> {{props.row.birthday}}</li>
                    <li><b>Role:</b> {{props.row.role}}</li>
            </ul>
              </div>
          <div class="col-md-3"></div>
        </div>
      </template>
      <template slot="actions" slot-scope="props">
        <div class="custom-actions">
          <a class="fa fa-edit"
            @click="onAction('edit-user', props.row)">
          </a>
          <a class="fa fa-trash"
            @click="onAction('show-modal', props.row)">
          </a>
        </div>
        <b-modal ref="delUserModal" hide-footer title="Delete User">
          <div class="d-block text-center">
            <h3>Do you confirm that<br/> you want to delete: </h3>
            <p>{{ props.row.firstName }} {{ props.row.lastName }}</p>
            <p>{{ props.row.email }}</p>
          </div>
          <b-btn class="btn" block @click="onAction('hide-modal')">No, Return to the list</b-btn>
          <b-btn class="btn" variant="danger" block @click="onAction('delete-user', props.row)">Yes, Delete It</b-btn>
        </b-modal>
      </template>
    </v-server-table>
  </div>
</template>


<script>
import Vue from 'vue'
import store from '@/vuex/store'
...
import { mapActions } from 'vuex'

import _ from 'underscore'

Vue.use(ServerTable, {}, true)
Vue.use(Event)

window.moment = require('moment')
window.axios = require('axios')

export default {
  name: 'users',
  data () {
    return { ... }
    }
  },
  methods: _.extend({}, mapActions(['deleteUser']), {
    onAction (action, data) {
      switch (action) {
        case 'edit-user':
          ...
        case 'delete-user':
          this.$refs.delUserModal.hide()
          console.log('DELETE USER: ', data.id)
          this.deleteUser(data.id)  // <- error line 131
          this.$refs.userTable.refresh()
          break
        default:
          this.$refs.userTable.refresh()
      }
    }
  }),
  store
}
</script>

vues/store.js

import Vue from 'vue'
import Vuex from 'vuex'
import login from '@/vuex/modules/login'
import shoppinglists from '@/vuex/modules/shoppinglists'
import users from '@/vuex/modules/users'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    login,
    shoppinglists,
    users
  }
})

vuex/modules.users/actions

import * as types from './mutation_types'
import api from '@/api/users'
import getters from './getters'
import store from '@/vuex/store'

export default {

  updateUser: (store, id) => {
    ...
  },

  createUser: () => {
    ...
  },

  deleteUser: (store, id) => {
    ...
  }
}
6
  • 1
    Are your modules namespaced ? Commented Dec 21, 2017 at 9:56
  • @VamsiKrishna no ... should I do ? Commented Dec 21, 2017 at 10:28
  • I smell an anti-pattern here, I think if you want to hide/show some component you should just use conditional rendering and then just dispatch your action/commit a change in the state and reactivity will just do the rest. I can elaborate proper answer if you give more details about the html part. Commented Dec 21, 2017 at 10:42
  • I updated my question, adding the template into the component description Commented Dec 21, 2017 at 10:58
  • I am investigating the vue-tables-2 component using vuex... maybe the errors comes from bad mixin of its mutations and mines... Commented Dec 21, 2017 at 11:30

1 Answer 1

0

when using vuex with vue-tables-2 , a module is registered with the name prop from the table component

useVuex is a boolean indicating whether to use vuex for state management, 
or manage state on the component itself. If you set it to true you must 
add a name prop to your table, which will be used to to register a module 
on your store. Use vue-devtools to look under the hood and see the current state.

I added correctly my own actions into this module, ( deleteUser: (store, id) was there) ... but I unfortunatly declared this 'users' module as namespaced = true... changing it to false or calling the action as namespaced solved this issue...

Sign up to request clarification or add additional context in comments.

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.