{{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