Vuex Mutation 不适用于 Nuxt.js

关键词：

【中文标题】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。

vuex中mutation和action的区别和使用(代码片段)

utations类似于事件，用于提交Vuex中的状态stateaction和mutations也很类似，主要的区别在于mutations只能是同步操作，，action可以包含异步操作，而且可以通过action来提交mutationsmutations有一个固有参数state，接收的是Vuex中的state对象actio... 查看详情

vuex中的辅助函数mapmutations详细解析(代码片段)

mapMutations是vuex的mutation的辅助函数，用于在组件中映射mutation内的方法，以便在该组件中直接使用mutation里的方法(说白了，就是一语法糖)1.在组件中导入vuex中的mapMutations:importmapMutationsfrom‘vuex‘2.在组件中导入mutation里的方法名... 查看详情

vuex2.0基本使用---mutation和action

1,mutation　　TheonlywaytoactuallychangestateinaVuexstoreisbycommittingamutation,在vue中，只有mutation才能改变state. mutation类似事件，每一个mutation都有一个类型和一个处理函数，因为只有mutation才能改变state,所以处理函数自动会获得一个默认... 查看详情

vuex--mutation，action个人理解

...向绑定。想要在任何地方更改state都需要通过commitstore的mutation。但是mutation只支持同步操作。想要完成异步操作，比如与后端通信然后将数据赋值给state，就需要通过action的异步回调中再去commitstore的mutation。也就是说想用异步必... 查看详情

14vuex2.0之mutation和action

...击+1按钮的时候，count加1，点击-1按钮的时候，count减1.1,mutation　　TheonlywaytoactuallychangestateinaVuexstoreisbycommittingamutation,在vue中，只有mutation才能改变state. mutation类似事件，每一个mutation都有一个类型和一个处理函数，因为 查看详情

mutation与vuex区别(代码片段)

vuex-action 1、当点发送过快，页面中渲染的内容与state中的数据不一致，vuex里面的state变得慢，且不持续更新2、action中是可以做到页面中state中数据保持一致责编：menVScode 2017-12-1622:39 阅读(970)      ... 查看详情

vuex之既生‘mutation’何生‘action’(代码片段)

vuex中，action及mutation均为操作数据的作用而存在，既然二者均可改变数据，为什么要分成两个方法来处理呢，因为：Mutation必须是同步函数mutations:someMutation(state)api.callAsyncMethod(()=>state.count++)现在想象，我们正在debug一个app并且... 查看详情

vuex(代码片段)

核心概念：State、Getter、Mutation、Action、Module使用新建store.js，引入vue和vuex，执行Vue.use(Vuex)来全局安装Vuex.。Vuex.Store即Vuex的构造函数，来初始化Vuex实例： 在根实例中注册store：state在state中定义属性name，给一个初始值“张... 查看详情

vuex

1.vuex安装：npminstallvuex2.用法：3.浏览器-工具-扩展程序 Vue.jsdevtools插件，用来查看vuex状态变化　　对状态进行操作后，需提交mutation才能触发vuex状态变更（包括分发action也是提交mutation，而不是直接变更状态）  查看详情

如何在 Vue 组件中测试对 Vuex Mutation 的调用？

】如何在Vue组件中测试对VuexMutation的调用？【英文标题】：HowdoItestthecallonaVuexMutationinaVuecomponent?【发布时间】：2021-09-2115:12:53【问题描述】：假设你有一个vue组件，其方法如下：methods:doSomething(someParameter)//maybedosomethingwiththatParame... 查看详情

vuex的五种属性

...变量的)。2、getters：是对state里面的变量进行过滤的。3、mutation:提交更新数据的方法，必须是同步的(如果需要异步使用action)。4、action：和mutation的功能大致相同，不同之处在于：          ... 查看详情

vuex相关(actions和mutation的异曲同工）(代码片段)

vuex说明：Vuex是一个专为Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。包含的内容：state：驱动应用的数据源；view:以生命方式将state... 查看详情

vuex的使用和理解

...)通过Dispatch触发Actions里面的动作；2、Actions通过Commit提交Mutations3、Mutations注册事件，通过这些事件来改变State的状态4、最后State状态改变完后渲染到另一个子组件上在执行之前，首先要搭建框架，创建store文件夹，子文件有index.j... 查看详情

mutation中修改state中的状态值，却报[vuex]donotmutatevuexstorestateoutsidemutationhandlers.

网上百度说是在mutation外修改state中的状态值，会报下列错误，可我明明在mutations中修改的状态值，还是报错接着百度，看到和我类似的问题，说mutations中只能用同步代码，异步用actions,我试着把修改值放在请求外面，结果不报错... 查看详情

vuex的使用，中大型项目必备

...（2）改变store中的状态的唯一途径就是显式地提交(commit)mutation。这样使得我们可以方便地跟踪每一个状态的变化。主要包括以下几个模块：State：定义了应用状态的数据结构，可以在这里设置默认的初始状态。Getter：允许组件从... 查看详情

vuex 订阅单个突变

】vuex订阅单个突变【英文标题】：vuexsubscribetoindividualmutation【发布时间】：2018-02-0109:38:52【问题描述】：是否可以订阅单个突变？代替：this.$store.subscribe((mutation,state)=>if(mutation===\'someMutation\')doSomething())我想要这样的东西：this... 查看详情

不要在mutation回调函数之外，修改vuex仓库里属性的状态(代码片段)

[vuex]donotmutatevuexstorestateoutsidemutationhandlers.import*astypesfrom‘./mutation-types‘importplayModefrom‘common/js/config‘importshufflefrom‘common/js/util‘exportconstinsertSong=function(commit,state,song)letplaylist=state.playlist.slice()//创建一个副本letsequenceList=state.seq... 查看详情

vuex中的mutationsactions

//阅读本文需要一点vuex的基本知识commit=>mutation //用来触发同步操作的方法dispatch=>action //用来触发异步操作的方法如果想改变vuex的store中的状态的唯一方法是提交(commit)mutation，如果想在action中改变store中的状态，先要... 查看详情