0

在我的组件中，我试图从模块执行 vuex 操作，但我收到错误，即使定义了此操作：

控制台日志

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>

列表用户.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) => {
    ...
  }
}
4

1 回答 1

0

将 vuex 与 vue-tables-2 一起使用时，会使用 table 组件中的 name 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) 在那里）......但我不幸地将这个“用户”模块声明为命名空间 = true......将其更改为 false 或调用命名空间的操作解决了这个问题...

于 2017-12-21T16:24:09.427 回答