首页 文章

vue.js - vuex:mapActions中的错误未知操作类型

提问于
浏览
0

在我的组件中,我尝试从模块执行vuex操作,但是我收到错误,即使定义了此操作:

console.log

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

UPDATE 插入了模板

这是我的ListUsers.vue中的完整模板

在每个表格行中,我有一个垃圾图标,用于触发模态面板(ref =“delUserModal”)以确认删除操作

<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
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) => {
    ...
  }
}

1 回答

  • 0

    当将vuex与vue-tables-2一起使用时,会从表组件中使用名称prop注册一个模块

    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.
    

    我正确地将自己的操作添加到此模块中,(deleteUser:(store,id)就在那里)...但我不幸地将这个'users'模块声明为namespaced = true ...将其更改为false或将操作调用为namespaced解决了这个问题......

相关问题