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.$mit('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.$mit('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(() => {
mit('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 简写
}
}
