1. 程式人生 > >Vuex深入理解

Vuex深入理解

+= payload put 深入 store mut urn div this

store下的index.js:

 1 import Vue from ‘vue‘
 2 import Vuex from ‘vuex‘
 3 
 4 Vue.use(Vuex)
 5 
 6 let store = new Vuex.Store({
 7   state: {
 8     count: 100
 9   },
10   mutations: {
11     addIncrement (state, payload) {
12       state.count += payload.n
13     },
14     deIncrement (state, payload) {
15 state.count -= payload.de 16 } 17 }, 18 actions: { 19 addAction (context) { 20 setTimeout(() => { 21 // 改變狀態,提交Mutations 22 context.commit(‘addIncrement‘, { n: 5 }) 23 }, 1000) 24 } 25 } 26 }) 27 28 export default store

increment.vue文件中的js部分:

 1 <script>
 2 export default {
 3   computed: {
 4     num () {
 5       return this.$store.state.count
 6     }
 7   },
 8   methods: {
 9     addHandle () {
10       this.$store.dispatch(‘addAction‘)
11     },
12     deHandle () {
13       this.$store.commit({
14         type: ‘deIncrement‘,
15 de: 10 16 }) 17 } 18 } 19 } 20 </script>

Vuex深入理解