Question

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

的console.log

java.lang.NullPointerException: Attempt to invoke virtual method

UPDATE 插入了模板

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

在每个表格行中，我有一个垃圾图标，用于触发模态面板（ref =＆＃34; delUserModal＆＃34;）以确认删除操作

SharedPreferences sharedPreferences = getActivity().getPreferences(0);

ListUsers.vue

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

VUES / store.js

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

vuex / modules.users /操作

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

Answer 1

将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）就在那里）...但我不幸地宣称这个用户＆＃39; module as namespaced = true ...将其更改为false或将操作调用为namespaced解决了这个问题......

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

1 个答案: