Vuex Mutation 不适用于 Nuxt.js

Posted 2023-03-10

【中文标题】Vuex Mutation 不适用于 Nuxt.js

【英文标题】：Vuex Mutation does not work with Nuxt.js

【发布时间】：2018-08-13 15:37:49

【问题描述】：

vuex 和 nuxt 的新手，因此可能有一个非常简单的解决方法。我有两个中间件，一个使用 AXios 对 github 进行 api 调用，另一个从 medium.com 用户的 RSS 提要中提取并转换为 JSON。

提交存储时github突变工作正常，中等突变不提交存储。

// 存储/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
                  )
            )
        
    ,

  

//中间件/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)
    )

//中间件/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)
    )

【问题讨论】：

定义“不起作用”。错误？

github 变异正确提交到商店，中等变异没有。为了清楚起见，将更新帖子

好的，但是会发生什么？你看到网络请求触发了吗？你看到它成功回来了吗？你有console.logged resp 的值以确保它是你所期望的吗？

我可以 console.log 来自已从变异函数内部转换为 JSON 的 Medium 的响应。它根本不承诺存储。

后续步骤：console.log 突变中的状态和数据。尝试推送一些静态的东西，比如 state.medium.push( foo: 'bar' ) 用于突变。等

【参考方案1】：

将此留作以后搜索。 rss 解析器在被触发时没有返回，因为它缺少 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)
    )

【讨论】：

浏览器错误日志中没有出现 CORS 错误？

不，更奇怪的是它会在没有 CORS 的情况下首次构建时 console.log。