action mutation 调用_Vuex之mutation和action

mutation

同步操作

基本使用

创建文件

创建 client/store/mutations/

创建 client/store/state/mutations.js

声明 mutations

// mutaions.js

export default {

updateCount (state, num) {

state.count = num

}

}

引用 mutations

// store.js

import defaultState from './state/state'

import mutations from './mutations/mutations' // 引用

import getters from './getters/getters'

export default () => {

return new Vuex.Store({

state: defaultState,

mutations, // 注入

getters

})

}

使用 mutaions

{{count}}

export default {

mounted () {

let i = 1

setInterval(() => {

this.$store.commit('updateCount', i++)

}, 1000)

},

computed: {

...mapState({

counter: (state) => state.count

})

}

}

mutations传多个参数

commit 方法只能接受两个参数，第一个参数是 state，第二参数，以对象的形式传。

// app.vue

export default {

mounted () {

console.log(this.$store)

let i = 1

setInterval(() => {

this.$store.commit('updateCount', {

num: i++,

num2: 2

})

}, 1000)

}

}

export default {

updateCount (state, { num, num2 }) { // es6 解构

console.log(num2) // 打印出 2

state.count = num

}

}

store 使用规范

我们可以不通过 commit 来进行操作，但官方推荐都通过 commit，所以尽量杜绝不通过 commit 的操作。

通过设置生产环境的严格模式，来进行代码规范。

import Vuex from 'vuex'

import defaultState from './state/state'

import mutations from './mutations/mutations'

import getters from './getters/getters'

const isDev = process.env.NODE_ENV === 'development' // 注意，正式环境不能使用 strict

export default () => {

return new Vuex.Store({

strict: isDev, // 添加严格模式

state: defaultState,

mutations,

getters

})

}

actions

异步操作

基本使用

创建文件

创建 client/store/actions/

创建 client/store/state/actions.js

声明 actions

// actions.js

export default {

updateCountAsync (store, data) {

setTimeout(() => {

store.commit('updateCount', {

num: data.num

})

}, data.time)

}

}

引用 actions

// store.js

import defaultState from './state/state'

import mutations from './mutations/mutations' // 引用

import getters from './getters/getters'

import actions from './actions/actions'

export default () => {

return new Vuex.Store({

state: defaultState,

mutations,

getters,

actions // 注入

})

}

使用 actions

{{count}}

export default {

mounted () {

this.$store.dispatch('updateCountAsync', {

num: 5,

time: 2000

})

},

computed: {

...mapState({

counter: (state) => state.count

})

}

}

简写帮助方法

mapMutations 和 mapActions

import {

mapState,

mapGetters,

mapActions,

mapMutations

} from 'vuex'

export default {

mounted () {

let i = 1

setInterval(() => {

this.updateCount({ // 调用方式也变了

num: i++,

num2: 2

})

}, 1000)

this.updateCountAsync({ // 调用方式也变了

num: 5,

time: 2000

})

},

computed: {

...mapState({

counter: (state) => state.count

}),

...mapGetters(['fullName'])

},

methods: {

...mapActions(['updateCountAsync']), // actions 简写

...mapMutations(['updateCount']) // mutations 简写

}

}