CODEWITHSUNDEEP
vue.jsvuexvue-cli
swordfish
swordfish

Reputation: 959

Vuex mutations should be function but "mutations.default" is {}

I am trying to fetch data and insert it into a basic html table

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

but i am stucking with this error when commiting a mounted function.

mutation.js

import Vue from 'vue'

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

this is where i am immiting it inside 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)
}

and here is the vuex store

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

Inside my component, i simply initiating two v-models and the data in computed

<script>
    import { mapActions } from 'vuex'

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

Upvotes: 0

Views: 2142

Answers (3)

Ignatius Andrew
Ignatius Andrew

Reputation: 8258

Check if the curly braces are properly closed for Mutation Object, this is a simple err but gives the same err message.

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

   }
  <== this curly braces was missing for me

Upvotes: 0

sharkykh
sharkykh

Reputation: 31

In your vuex store file, change the mutations import from

import * as mutations from './mutations'

to

import mutations from './mutations'

Since you're exporting one single object rather than separate variables,
you can't import all (aka *) from the file.

Upvotes: 3

Bonjov
Bonjov

Reputation: 305

that's right mutation is object and it has methods. it is short form of this example

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

please see Method definitions

you must insert data to state when mutation will happen

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

Upvotes: 0

Related Questions