Vuex Mutation does not work with Nuxt.js

Question

New to vuex and nuxt so there may be a very simple fix to this. I have two middlewares, one makes an api call with AXIOS to github and the other pulls from a RSS feed of a medium.com user that convert to JSON.

The github mutation works fine when committing to store, the medium mutation does not commit to the store.

// store/index.js

export const state = () => ({
    github: [],
    medium: [],
    blog: []
  })

  export const mutations = {
    ADD_MEDIUM(state, data) {
        data.items.forEach((el) => {
            state.medium.push({
                'createdOn': el.pubDate,
                'title': el.title,
                'url': el.link
            })
        })
    },
    ADD_GITHUB(state, data) {
        if(state.github.length === 0){
            data.data.forEach((el) => {
                state.github.push({
                    'createdOn': el.created_at,
                    'title': el.full_name,
                    'url': el.html_url
                  })
            })
        }
    },

  }

// middleware/medium.js

import rssParser from 'rss-parser'
let parser = new rssParser()

export default function ({ store, route }) {
    parser.parseURL('https://medium.com/feed/@user_name')
    .then((resp) => {
        store.commit('ADD_MEDIUM', resp)
    })

}

// middleware/github.js

import axios from 'axios'

export default function ({ store, route }) {
    axios.get('https://api.github.com/users/user_name/repos')
    .then((resp) => {
        store.commit('ADD_GITHUB', resp)
    })
}

The github mutation properly commits to the store, the medium mutation does not. Will update post for clarity — BHalvy82
OK, but what does happen? Are you seeing the network request fire? Are you seeing it come back successfully? Have you console.logged the value of resp to make sure it's what you expect? — ceejayoz
I can console.log the response from Medium that has converted to JSON from inside the mutation function. It simply doesn't commit to store. — BHalvy82
Next steps: console.log state and data within the mutation. Try pushing something static, like state.medium.push({ foo: 'bar' }) for the mutation. etc. — ceejayoz

BHalvy82 BHalvy82 · Accepted Answer · 2018-03-05T21:40:11

Leaving this for future search. The rss-parser wasn't returning when it was fired because it lacked CORS.

import rssParser from 'rss-parser'
const CORS_PROXY = "https://cors-anywhere.herokuapp.com/"

export default function ({ store, route }) {
    let parser = new rssParser()

    parser.parseURL(CORS_PROXY + 'https://medium.com/feed/@user_name', (err, feed) => {
        console.log(feed)
        store.commit('ADD_MEDIUM', feed)
    })
}

Vuex Mutation does not work with Nuxt.js

1 Answers