mutation与vuex区别

vuex- action

 

1、当点发送过快，页面中渲染的内容与state中的数据不一致，vuex里面的state变得慢，且不持续更新

2、action中是可以做到页面中state中数据保持一致

责编：menVScode 2017-12-16 22:39 阅读(970)

如果点击按钮不是直接改变store中的状态，而是完成其他操作后再来改变，这时候会出现一个问题。

/store/index.js

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100
    },
    mutations:{//不能直接改变state中的状态，唯一途径显示的提交mutations
        addNum(state,n){
            setTimeout(()=>{ //模拟异步操作
                state.count +=n
            },1000)
        },
        minusNum(state,payload){
            state.count -= payload.min
        }
    }
})
export default store

初始化状态

慢慢点击+按钮，观察页面中的数字和控制台中的数字。

快速点击+按钮，观察页面中的数字和控制台中的数字。

两个不同点击方式有一个共同的现象：页面中数字跟控制台数字没有统一。当点击一下+按钮就通过 mutation 改变状态，在vuex中有一个原则：在提交mutation的时候必须是同步的。

当一提交mutation，控制台Base State中必定有一条记录，不做异步操作。但是要包含异步操作的话，需要使用 action。

Action：包含异步操作、提交mutation改变状态。

修改后/store/index.js

在actions中通过 context.commit('addNum',{}) 来提交mutation

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

let store = new Vuex.Store({
    state:{ //应用中需要的状态数据
        count:100
    },
    mutations:{//不能直接改变state中的状态，唯一途径显示的提交mutations
        addNum(state,payload){
            state.count +=payload.n
        },
        minusNum(state,payload){
            state.count -= payload.min
        }
    },
    actions:{
        addAction(context){//参数：对象，不是当前的store实例
            setTimeout(()=>{ //模拟异步操作
                //改变状态，必须提交mutation
                context.commit('addNum',{n:3})
            },1000)
        }
    }
})

export default store

修改后 /src/components/Increment.vue

通过 this.$store.dispatch('addAction') 来触发一个action

<template>
    <div>
        <h2>加减</h2>
        <button @click="addHandle">+</button>
        <span>{{num}}</span>
        <button @click="minusHandle">-</button>
    </div>
</template>
<script>
    export default{
        computed:{
            num(){
                return this.$store.state.count
            }
        },
        methods:{
            addHandle(){
                //改变状态，只需提交mutation中的addNum
                //this.$store.commit('addNum',3)

                //触发一个action
                this.$store.dispatch('addAction')
            },
            minusHandle(){
                this.$store.commit({
                    type:'minusNum',
                    min:5
                })
            }
        }
    }
</script> 

与本文action相关的文章（必看）：http://menvscode.com/detail/5a353b05a7833e528ca883de

• 喜欢 (0)
• 收藏 (0)

标签： action vuex

分享：0

前端交流群： 

原创声明： 本文属于原创文章，转载请注明出处--http://www.menvscode.com/detail/5a353031a7833e528ca883dd

上一篇：vuex中action异步操作/getter计算状态下一篇：vue分别利用$emit/sync修饰符和vuex封装select组件

 

登录

 

 

 

 

 

还没有评论，快来抢沙发吧！

 

 

 

畅言商业版

畅言正式推出商业版包月/包年VIP服务，评论流弹窗位置全站去广告，一对一专业技术支持，一对一重点客户服务，现在就加入我们的VIP大家庭吧！

 

广告

查看详情>

 

MVC前端网(menVScode)正在使用畅言

关闭

 

 

 

按钮

立刻说两句吧！

 

 

阅读排行榜

vue组件级路由钩子函数(beforeRouteEnter/beforeRouteUpdate/beforeRouteLeave)

vue路由中设置滚动行为(scrollBehavior)

解决Do not use built-in or reserved HTML elements as component id: Header问题

vue笔记之methods中函数固定参数$event/事件方法

vue中transition动态设置name属性左右切换

vue笔记之v-if/v-show/绑定事件

vue路由中动态路径参数/监控$route路由信息对象

vue利用tween.js使页面进行滚动效果

vue路由(vue-router)hash和history模式

vue中slot插槽功能

最新发布

vue-cli脚手架中引入jquery

vue中$set介绍与$set在数组中的应用

提取Vue项目的中单个的CSS/LESS/SASS并压缩的配置方法

vue-cli脚手架中使用Less

vue-cli脚手架种中引入elementUI

vue深入组件通信

vue深入生命周期

vue中解决跨域问题

vue-cli脚手架中配置webpack.dev.conf.js文件实现数据模拟

vue-cli脚手架配置json-server

本站在建设中引用了因特网上的一些资源并对有明确来源的注明了出处，版权归原作者及网站所有；
如果您对本站文章版权的归属存有异议，请您联系站长：third_king$163.com(将$换成@)，我们会马上做出整改。

Copyright © menvscode.com All Rights Reserved.   浙ICP备16010139号-3