store 下的 index.js:
- import vue from 'vue'
- import Vuex from 'vuex'
- Vue.use(Vuex)
- let store = new Vuex.Store({
- state: {
- count: 100
- },
- mutations: {
- addIncrement (state, payload) {
- state.count += payload.n
- },
- deIncrement (state, payload) {
- state.count -= payload.de
- }
- },
- actions: {
- addAction (context) {
- setTimeout(() => {
- // 改变状态, 提交 Mutations
- context.commit('addIncrement', { n: 5 })
- }, 1000)
- }
- }
- })
- export default store
increment.vue 文件中的 js 部分:
<script>
export default {
computed: {
num () {
return this.$store.state.count
}
},
methods: {
addHandle () {
this.$store.dispatch('addAction')
},
deHandle () {
this.$store.commit({
type: 'deIncrement',
de: 10
})
}
}
}
</script>
来源: http://www.bubuko.com/infodetail-2740712.html