store.js
------------------------------------
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
const state = {
count: 100
}
const mutations = {
mutationsAddCount (state, n = 0) {
return (state.count += n)
},
mutationsReduceCount (state, n = 0) {
return (state.count -= n)
}
}
const actions = {
actionsAddCount (context, n = 0) {
return new Promise((resolve, reject) => {
setTimeout(() => {
context.commit('mutationsAddCount', n)
resolve('ok')
}, 1000)
})
},
actionsReduceCount ({ commit }, n = 0) {
return commit('mutationsReduceCount', n)
}
}
const getters = {
getterCount (state) {
return (state.count)
}
}
export default new Vuex.Store({
state,
mutations,
actions,
getters
})
使用
----------------------------------------------
export default {
methods: {
handleAddClick (n) {
// 同步操作
this.$store.commit('mutationsAddCount', n)
},
handleReduceClick (n) {
this.$store.commit('mutationsReduceCount', n)
},
handleActionsAdd (n) {
// 含有异步操作，例如向后台提交数据
this.$store.dispatch('actionsAddCount', n).then((res) => {
console.log(res)
})
},
handleActionsReduce (n) {
this.$store.dispatch('actionsReduceCount', n)
},
count1 () {
console.log('method', this.$store.getters.getterCount)
return this.$store.getters.getterCount
}
},
computed: {
count () {
console.log('computed', this.$store.getters.getterCount)
return this.$store.getters.getterCount
}
},
watch: {
count2 () {
console.log('watch', this.$store.getters.getterCount)
return this.$store.getters.getterCount
}
}
}
扫一扫
154
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
