Vuex 之 mutation

Mutation

The only way to actually change state in a Vuex store is by committing a mutation .each mutation has a string type and a handler.

 

const store = new Vuex.Store({

    state:{

        count : 1

    },

    mutations :{

        increment(state){

            state.count++;

        }

    }

});

 

(1)You cannot directly call a mutation handler.

 

(2)To invoke a mutation handler,you need to call store.commit with its type;

store.commit('increment');

 

 

Commit with Payload(载荷)

    You can pass an additional argument to store.commit ,while is called the payload for the mutation.

 

mutations:{

  increment( state , n ){

    state.count += n

  }

}

 

store.commit('increment',10)

 

 

    In most cases,the payload should be an object so that it can contain multiple fields,and the recorded mutation will also be more descriptive;

 

 

mutations:{

  increment(state,payload){

    state.count +=payload.amount

  }

}

 

store.commit('increment',{

    amount: 10

})

 

 

 

Object-style commit

An alternative way to commit a mutation is by directly using an object that has a type property 

store.commit({

  type: 'increment',

  amount: 10

});

 

when using object-style commit ,the entire object will be passed as the payload to mutation handler,so the handler remains the same:

mutations:{

    increment(state,payload){

        state.count += payload.amount;

    }

}

 

 

Mutations Follow Vue's Reactivity Rules

    Since a Vuex store's state is made reactive by Vue,when we mutate the state,Vue components observing the state will update automatically.so we need to know

    1.Prefer initializing your store's initial state with all desired fields upfront. 提前在store中初始化好所有所需属性。

    2.Replace that Object with a fresh one.For example ,using the object spread syntax.  当需要在对象上添加新属性时，你应该

 

    使用

Vue.set(obj,'newProp',123)

 

  或者用新对象替换老对象。例如，利用stage-3的对象展开运算符

state.obj = { ...state.obj,newProp: 123}

 

Using Constants for Mutations Types  使用常量替代mutation事件类型

It is a commonly seen pattern to use constants for mutation types in various Flux implementation. 

用常量替代 mutation 事件类型在各种 Flux 实现中是很常见的模式。这样可以使 linter 之类的工具发挥作用，同时把这些常量放在单独的文件中可以让你的代码合作者对整个 app 包含的 mutation 一目了然

 

//mutation-type.js

export const SOME_MUTATION = 'SOME_MUTATION'

 

// store.js

import Vuex from 'vuex'

import {SOME_MUTATION} from './mutation-types'

 

const store = new Vuex.Store({

    state: {...},

    mutations:{

        [SOME_MUTATION](state){

        //mutate state 

    }

   }

});

 

 

Mutations Must Be Synchronous  mutation必须是同步函数

 

 

 

 

Action 

Action类似于mutation，不同在于

• Action提交的是mutation,而不是直接变更状态。

• Action可以包含任意异步操作。

const store = new Vuex.Store({

  state: {

    count: 0

  },

  mutations: {

    increment (state) {

      state.count++

    }

  },

  actions: {

    increment (context) {

      context.commit('increment')

    }

  }})

 

action接受一个与store实例具有相同方法和属性的context对象，因此你可以调用 context.commit 提交一个mutation或者通过context.state和context.getters来获取state和getters.

 

实践中，我们会经常用到es2015的参数结构来简化代码。

 

actions:{

    increment({commit}){

        commit('increment')

    }

}

 

 

分发Action

Action通过 store.dispatch 方法触发

 

store.dispatch('increment')

 

Action支持同样在载荷方式和对象方式进行分发

//以载荷形式分发

 

store.dispatch('incrementAsync',{

    amount: 10

})

 

//以对象形式分发

store.dispatch({

    type:'incrementAsync',

    amount: 10

});

 

 

 

 

 

在获取用户信息的时候可以使用。

 

async getUserInfo({commit}){

    commit('改变用户信息及状态',await 获取用户信息请求)；

}