Vuex 突变应该是函数，但“mutations.default”是 {}答案

【问题标题】：Vuex mutations should be function but "mutations.default" is {}Vuex 突变应该是函数，但“mutations.default”是 {}
【发布时间】：2019-07-08 12:44:04
【问题描述】：

我正在尝试获取数据并将其插入到一个基本的 html 表中

<tr>
    <td v-for="item in dataTable" :key="item.id">{{item.threadName}}</td>
</tr>

但是我在提交挂载函数时遇到了这个错误。

mutation.js

import Vue from 'vue'

export default {
    receiveAll (state, data) {
        data.forEach(item => {
            return item
        })
    }
}

这是我在 actions.js

中模仿它的地方

import * as api from '../api'

export const getData = ({ commit }) => {
    api.getData(data => {
        commit('receiveAll', data)
    })
}

data.js

'use strict';

module.export = [
    {
        id: 'm_1',
        threadID: 't_1',
        threadName: 'Jing and Bill',
        authorName: 'Bill',
        text: 'Hey Jing, want to give a Flux talk at ForwardJS?',
        timestamp: Date.now() - 99999
    },
    {
        id: 'm_2',
        threadID: 't_1',
        threadName: 'Jing and Bill',
        authorName: 'Bill',
        text: 'Seems like a pretty cool conference.',
        timestamp: Date.now() - 89999
    }
]

api/index.js

const data = require('./data')
const LATENCY = 16

export function getData (cb) {
    setTimeout(() => {
        cb(data)
    }, LATENCY)
}

这里是 vuex 商店

import Vue from 'vue'
import Vuex from 'vuex'
import * as actions from './actions'
import * as mutations from './mutations'

Vue.use(Vuex)

const state = {
    getData: []
}

export default new Vuex.Store({
    state,
    actions,
    mutations
})

在我的组件中，我只是启动了两个 v-model 和计算中的数据

<script>
    import { mapActions } from 'vuex'

    export default {
        name: 'SearchTable',
        data () {
            return {
                search_query: '',
                search_sort: ''
            }
        },
        computed: mapActions({
            dataTable: 'getData'
        })
    }
</script>

【问题讨论】：

标签： vue.js vuex vue-cli

【解决方案1】：

将receiveAll (state, data){ ... 更改为function receiveAll (state, data) { ...

试试这个：

import Vue from 'vue'

const receiveAll = (state, data) => {
    return data.forEach(item => {
        return item
    })
}

export default {
  receiveAll 
}

【讨论】：

【解决方案2】：

没错，mutation 是 object，它有方法。这是这个例子的缩写形式

 export default {
        receiveAll: function (state, data) {
            data.forEach(item => {
                state.getData.push(item)
            })
        }
   }

请看Method definitions

您必须插入数据以说明何时发生突变

export default {
    receiveAll (state, data) {
        data.forEach(item => {
            state.getData.push(item)
        })
    }
}

【讨论】：

还是一样的错误！！我想知道我所做的是否正确！
未捕获的错误：[vuex] 突变应该是函数，但“mutations.mtations”是 {}。

【解决方案3】：

在您的 vuex 商店 文件中，更改从

导入的突变

import * as mutations from './mutations'

到

import mutations from './mutations'

由于您要导出单个对象而不是单独的变量，
你不能从文件中导入所有（又名*）。

【讨论】：

【解决方案4】：

检查 Mutation Object 的大括号是否正确闭合，这是一个简单的错误，但会给出相同的错误消息。

mutations: {
     getAppIds: (state, payload) => {

   }
  <== this curly braces was missing for me

【讨论】：